<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.1">
  <link rel="apple-touch-icon" sizes="180x180" href="/Typescript/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/Typescript/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/Typescript/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/Typescript/images/logo.svg" color="#222">

<link rel="stylesheet" href="/Typescript/css/main.css">


<link rel="stylesheet" href="/Typescript/lib/font-awesome/css/font-awesome.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"yoursite.com","root":"/Typescript/","scheme":"Muse","version":"7.7.2","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
  </script>

  <meta property="og:type" content="website">
<meta property="og:title" content="Typescript">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="Typescript">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="HC">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="http://yoursite.com/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : true,
    isPost : false,
    lang   : 'en'
  };
</script>

  <title>Typescript</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="Toggle navigation bar">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <div>
      <a href="/Typescript/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Typescript</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>


<nav class="site-nav">
  
  <ul id="menu" class="menu">
        <li class="menu-item menu-item-home">

    <a href="/Typescript/" rel="section"><i class="fa fa-fw fa-home"></i>Home</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/Typescript/archives/" rel="section"><i class="fa fa-fw fa-archive"></i>Archives</a>

  </li>
  </ul>

</nav>
</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content">
            

  <div class="posts-expand">
        
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block home" lang="en">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/11/24/Typescript/%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/Typescript/images/avatar.gif">
      <meta itemprop="name" content="HC">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Typescript">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          
            <a href="/Typescript/2020/11/24/Typescript/%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E/" class="post-title-link" itemprop="url">Typescript/类型声明</a>
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>
              

              <time title="Created: 2020-11-24 12:18:25 / Modified: 16:01:22" itemprop="dateCreated datePublished" datetime="2020-11-24T12:18:25+08:00">2020-11-24</time>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h1 id="类型声明"><a href="#类型声明" class="headerlink" title="类型声明"></a>类型声明</h1><h2 id="为什么要使用类型声明？？"><a href="#为什么要使用类型声明？？" class="headerlink" title="为什么要使用类型声明？？"></a>为什么要使用类型声明？？</h2><ul>
<li><p>声明文件可以让我们不需要将JS重构为TS,  只需要加上声明文件即可</p>
</li>
<li><p>类型声明在编译的时候都会被删除掉，不会影响真正的代码</p>
</li>
<li><p>使用关键字<code>declare</code>(除了interface 和 type外)声明</p>
</li>
<li><p>常用的全局类型声明</p>
<p><strong>注意的是，不能在该文件下使用export export default导出，否则这些声明就不是声明全局的了</strong></p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">declare</span> <span class="keyword">var</span>  <span class="comment">// 声明全局变量</span></span><br><span class="line"><span class="keyword">declare</span> <span class="function"><span class="keyword">function</span>  // 声明全局方法</span></span><br><span class="line"><span class="function"><span class="title">declare</span> <span class="title">class</span> // 声明全局类</span></span><br><span class="line"><span class="function"><span class="title">declare</span> <span class="title">enum</span> // 声明全局枚举类型</span></span><br><span class="line"><span class="function"><span class="title">declare</span> <span class="title">namespace</span> // 声明全局对象</span></span><br><span class="line"><span class="function"><span class="title">interface</span> 和 <span class="title">type</span>  // 声明全局类型</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>普通类型声明</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">declare</span> <span class="keyword">let</span> myName: <span class="built_in">string</span>;</span><br><span class="line"><span class="keyword">declare</span> <span class="keyword">let</span> age: <span class="built_in">number</span>;</span><br><span class="line"><span class="keyword">declare</span> <span class="function"><span class="keyword">function</span> <span class="title">getInfo</span>(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span></span>): <span class="title">boolean</span></span>;</span><br><span class="line"><span class="keyword">declare</span> <span class="keyword">class</span> Person &#123; <span class="keyword">public</span> oName: <span class="built_in">string</span>; <span class="keyword">public</span> age: <span class="built_in">number</span> &#125;;</span><br><span class="line"><span class="keyword">declare</span> <span class="keyword">namespace</span> myNameSpace &#123;</span><br><span class="line">    <span class="keyword">const</span> name: <span class="built_in">string</span>;</span><br><span class="line">    <span class="keyword">const</span> age: <span class="built_in">number</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> Interface &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">    address: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> MyType = &#123; name: <span class="built_in">string</span>; age: <span class="built_in">number</span>; <span class="keyword">type</span>: <span class="built_in">string</span> &#125;;</span><br></pre></td></tr></table></figure>
</li>
<li><p>声明jQuery对象</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// a.ts</span></span><br><span class="line"><span class="keyword">declare</span> <span class="keyword">const</span> $: <span class="function">(<span class="params">selector: <span class="built_in">string</span></span>) =&gt;</span> &#123;</span><br><span class="line">    on():<span class="built_in">void</span>;</span><br><span class="line">    width(length: <span class="built_in">number</span>): <span class="built_in">void</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// b.ts</span></span><br><span class="line"><span class="keyword">export</span> &#123;&#125;; <span class="comment">// 加上, 否则是重复定义</span></span><br><span class="line"><span class="comment">// 实现这个方法</span></span><br><span class="line"><span class="keyword">const</span> $ = <span class="function">(<span class="params">selector: <span class="built_in">string</span></span>) =&gt;</span> (&#123;</span><br><span class="line">    on() &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'afdsafs'</span>;</span><br><span class="line">    &#125;,</span><br><span class="line">    width() &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'fjds'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">const</span> r = $(<span class="string">'a'</span>).on();</span><br><span class="line"><span class="built_in">console</span>.log(r);</span><br></pre></td></tr></table></figure>
</li>
<li><p>外部枚举</p>
<ul>
<li><p>使用关键字<code>declare enum</code>定义的枚举类型</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">declare</span> <span class="keyword">enum</span> Color &#123;</span><br><span class="line">    Red,</span><br><span class="line">    Yellow,</span><br><span class="line">    Blue,</span><br><span class="line">    Green,</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> colors = [</span><br><span class="line">    Color.Blue,</span><br><span class="line">    Color.Green,</span><br><span class="line">    Color.Red,</span><br><span class="line">    Color.Yellow</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 编译的结果</span></span><br><span class="line"><span class="keyword">var</span> colors = [</span><br><span class="line">    Color.Blue,</span><br><span class="line">    Color.Green,</span><br><span class="line">    Color.Red,</span><br><span class="line">    Color.Yellow</span><br><span class="line">];</span><br></pre></td></tr></table></figure>
</li>
<li><p>常量枚举</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">declare</span> <span class="keyword">const</span> <span class="keyword">enum</span> Color &#123;</span><br><span class="line">    Red,</span><br><span class="line">    Yellow,</span><br><span class="line">    Blue,</span><br><span class="line">    Green,</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> colors = [</span><br><span class="line">    Color.Blue,</span><br><span class="line">    Color.Green,</span><br><span class="line">    Color.Red,</span><br><span class="line">    Color.Yellow</span><br><span class="line">]</span><br><span class="line"><span class="comment">// 编译结果</span></span><br><span class="line"><span class="keyword">var</span> colors = [</span><br><span class="line">  <span class="number">0</span>, <span class="comment">/*Blue*/</span></span><br><span class="line">  <span class="number">1</span>, <span class="comment">/*Green*/</span></span><br><span class="line">  <span class="number">2</span>, <span class="comment">/*Red*/</span></span><br><span class="line">  <span class="number">3</span> <span class="comment">/*Yellow*/</span></span><br><span class="line">]</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>namespace</p>
<ul>
<li><p>如果一个全局变量包括了很多的子属性，那么可能会使用到namespace</p>
</li>
<li><p>在声明文件中的namespace表示一个全局变量包括很多的子属性</p>
</li>
<li><p>在命名空间内部不需要使用declare声明属性或方法</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">declare</span> <span class="keyword">namespace</span> Person &#123;</span><br><span class="line">    <span class="keyword">const</span> name: <span class="built_in">string</span>;</span><br><span class="line">    <span class="keyword">const</span> age: <span class="built_in">number</span>;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">eat</span>(<span class="params">food: <span class="built_in">string</span></span>):<span class="title">void</span></span>;</span><br><span class="line">    <span class="keyword">namespace</span> Children &#123;</span><br><span class="line">        <span class="keyword">const</span> address: <span class="built_in">string</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 使用的时候就有提示了</span></span><br><span class="line">Person.name;</span><br><span class="line">Person.age;</span><br><span class="line">Person.eat(<span class="string">'rice'</span>);</span><br><span class="line">Person.Children.address;</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>类型声明文件</p>
<ul>
<li><p>我们可以把类型声明放在一个单独的类型声明文件中去</p>
</li>
<li><p>文件的命名规范为<code>xx.d.ts</code></p>
</li>
<li><p>好处是: 看类型声明文件有助于对库的使用方式</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//  src/typings/jquery.d.ts</span></span><br><span class="line"><span class="keyword">declare</span> <span class="keyword">const</span> $: <span class="function">(<span class="params">selector: <span class="built_in">string</span></span>) =&gt;</span> &#123;</span><br><span class="line">    on(): <span class="built_in">void</span>;</span><br><span class="line">    width(length: <span class="built_in">number</span>): <span class="built_in">void</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// tsconfig.json  增加配置</span></span><br><span class="line">&#123;</span><br><span class="line">  <span class="string">"include"</span>: [</span><br><span class="line">    <span class="string">"src/**/*"</span> <span class="comment">// 表示的是找src下的所有目录下所有文件</span></span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//   src/test.ts</span></span><br><span class="line"><span class="comment">// 已经有提示了</span></span><br><span class="line">$(<span class="string">'#app'</span>).on();</span><br><span class="line">$(<span class="string">'#app'</span>).width(<span class="number">123</span>);</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>第三方声明文件</p>
<ul>
<li><p>如果有的库不是用ts写的，那么一般都有第三方的声明文件，在安装这个库时，如果没有内置声明文件，那么需要进行下载</p>
</li>
<li><p>@types是一个约定的前缀，所有的第三方声明的类型库都会带上这个前缀</p>
</li>
<li><p>Javascript的许多内置对象，Typescript官方已经给我们写好了，放在了全局作用域下，可以直接使用。</p>
</li>
</ul>
</li>
<li><p>安装jquery, 并且使用安装其声明文件</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">// 安装  </span><br><span class="line">cnpm install jquery -S;</span><br><span class="line">cnpm install @types/jquery;</span><br></pre></td></tr></table></figure>

<ul>
<li><p>自己编写声明文件</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 根目录  typings/jquery/index.d.ts</span></span><br><span class="line"><span class="keyword">declare</span> <span class="function"><span class="keyword">function</span> <span class="title">jQuery</span>(<span class="params">selector:<span class="built_in">string</span></span>):<span class="title">HTMLElement</span></span>;</span><br><span class="line"><span class="keyword">declare</span> <span class="keyword">namespace</span> jQuery&#123;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">ajax</span>(<span class="params">url:<span class="built_in">string</span></span>):<span class="title">void</span></span></span><br><span class="line"><span class="function">&#125;</span></span><br><span class="line"><span class="function"><span class="title">export</span> <span class="title">default</span> <span class="title">jQuery</span></span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// tsconfig.json增加配置</span></span><br><span class="line">&#123;</span><br><span class="line">  <span class="string">"compilerOptions"</span>: &#123;</span><br><span class="line">    <span class="string">"target"</span>: <span class="string">"es5"</span>,</span><br><span class="line">    <span class="string">"module"</span>: <span class="string">"commonjs"</span>,</span><br><span class="line">    <span class="string">"strict"</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="string">"esModuleInterop"</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="string">"skipLibCheck"</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="string">"forceConsistentCasingInFileNames"</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="comment">// 增加baseUrl和paths字段    </span></span><br><span class="line">    <span class="string">"baseUrl"</span>: <span class="string">"./"</span>,</span><br><span class="line">    <span class="string">"paths"</span>: &#123;</span><br><span class="line">      <span class="string">"*"</span>: [</span><br><span class="line">        <span class="string">"typings/*"</span></span><br><span class="line">      ]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>npm 声明文件可能所在的位置</p>
<ul>
<li><p>node_modules/jquery/package.json  中的 types</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">	<span class="attr">"types"</span>: <span class="string">"types/xxx.d.ts"</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>node_modules/jquery/index.d.ts</p>
</li>
<li><p>node_modules/@types/jquery/index.d.ts</p>
</li>
<li><p>typings/jquery/index.d.ts</p>
</li>
</ul>
</li>
<li><p>查找声明文件</p>
<ol>
<li><p>给package.json增加一个<code>types</code>或<code>typings</code>字段指定一个声明文件的地址</p>
</li>
<li><p>在项目的根目录下，有一个index.d.ts</p>
</li>
<li><p>在package.json中的main字段指定的入口文件，有一个同名不同后缀的字段</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="string">"name"</span>: <span class="string">"myLib"</span>,</span><br><span class="line">    <span class="string">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">    <span class="string">"main"</span>: <span class="string">"lib/index.js"</span>,</span><br><span class="line">    <span class="string">"types"</span>: <span class="string">"myLib.d.ts"</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<ul>
<li>查找方式<ol>
<li>先找myLib.d.ts</li>
<li>没有找 index.d.ts</li>
<li>如果没有再找 lib/index.d.ts</li>
<li>如果上面三个都没有，就认为没有声明文件了</li>
</ol>
</li>
</ul>
</li>
<li><p>扩展变量类型</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 扩展字符串的原型</span></span><br><span class="line"><span class="keyword">interface</span> String &#123;</span><br><span class="line">    eat():<span class="built_in">void</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> str = <span class="string">'hchlq'</span>;</span><br><span class="line">str.eat();</span><br></pre></td></tr></table></figure>
</li>
<li><p>模块内全局扩展</p>
<figure class="highlight plain"><figcaption><span>global &#123;&#125;```进行扩展</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">&#96;&#96;&#96;ts</span><br><span class="line">declare global &#123;</span><br><span class="line">    interface String &#123;</span><br><span class="line">        study():void;</span><br><span class="line">    &#125;</span><br><span class="line">    interface Window &#123;</span><br><span class="line">        run():void;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">export &#123;&#125;; &#x2F;&#x2F; 必须要导出，再外部不能使用</span><br></pre></td></tr></table></figure>
</li>
<li><p>合并声明</p>
<ul>
<li>同一个名称的两个独立声明会被合并成一个单一声明</li>
<li>合并后的声明拥有原先两个声明的特性</li>
<li>一般有类型声明合并的类型:  函数，类，接口</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 函数</span></span><br><span class="line"><span class="comment">// 常见的是重载 </span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getName</span>(<span class="params">name: <span class="built_in">string</span></span>):<span class="title">string</span></span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getName</span>(<span class="params">name: <span class="built_in">number</span></span>):<span class="title">number</span></span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getName</span>(<span class="params">name: <span class="built_in">string</span> | <span class="built_in">number</span></span>): <span class="title">string</span> | <span class="title">number</span> </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> name === <span class="string">'string'</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'hchlq'</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="number">123</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 或者命名空间扩展函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getName</span>(<span class="params">name: <span class="built_in">string</span></span>): <span class="title">string</span> </span>&#123;</span><br><span class="line">    getName.name;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">'hchlq'</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">namespace</span> getName &#123;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">let</span> name: <span class="built_in">string</span> = <span class="string">'string'</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 类</span></span><br><span class="line"><span class="keyword">class</span> Test &#123;</span><br><span class="line">    <span class="keyword">public</span> name: <span class="built_in">string</span> = <span class="string">'hchlq'</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> Test &#123;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> obj: Test = &#123;</span><br><span class="line">    name: <span class="string">'string'</span>,</span><br><span class="line">    age: <span class="number">18</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 命名空间扩展类</span></span><br><span class="line"><span class="keyword">class</span> Test &#123;</span><br><span class="line">    <span class="keyword">public</span> name: <span class="built_in">string</span> = <span class="string">'hchlq'</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">namespace</span> Test &#123;</span><br><span class="line">    <span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">eat</span>(<span class="params"></span>):<span class="title">void</span> </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'person can eat'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 接口合并</span></span><br><span class="line"><span class="keyword">interface</span> Alarm &#123;</span><br><span class="line">    price: <span class="built_in">number</span>;</span><br><span class="line">    alert(s: <span class="built_in">string</span>): <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> Alarm &#123;</span><br><span class="line">    weight: <span class="built_in">number</span>;</span><br><span class="line">    alert(s: <span class="built_in">string</span>, n: <span class="built_in">number</span>): <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



</li>
</ul>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

        
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block home" lang="en">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/11/23/Typescript/%E6%A8%A1%E5%9D%97%E5%92%8C%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/Typescript/images/avatar.gif">
      <meta itemprop="name" content="HC">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Typescript">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          
            <a href="/Typescript/2020/11/23/Typescript/%E6%A8%A1%E5%9D%97%E5%92%8C%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4/" class="post-title-link" itemprop="url">Typescript/模块和命名空间</a>
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>
              

              <time title="Created: 2020-11-23 10:28:02 / Modified: 10:54:40" itemprop="dateCreated datePublished" datetime="2020-11-23T10:28:02+08:00">2020-11-23</time>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h1 id="模块和命名空间"><a href="#模块和命名空间" class="headerlink" title="模块和命名空间"></a>模块和命名空间</h1><h2 id="模块"><a href="#模块" class="headerlink" title="模块"></a>模块</h2><ul>
<li><p>全局模块</p>
<ul>
<li><p>默认情况下，在一个新的Typescript文件下写代码时，处于的是全局命名空间中</p>
</li>
<li><p>在项目中，使用全局变量空间是比较危险的，因为可能会与文件内的其他代码冲突。推荐使用文件模块作为命名空间</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// a.ts</span></span><br><span class="line"><span class="keyword">const</span> a1 = <span class="number">123</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// b.ts</span></span><br><span class="line"><span class="keyword">const</span> a2 = a1; <span class="comment">// 这样是可以的， 虽然不能访问，但是变量名不能重复</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>文件模块</p>
<ul>
<li><p>如果在Typescript文件中含有<strong>import</strong>或<strong>export</strong>, 那么就会在这个文件创建一个局部作用域，只能在这个文件按下访问</p>
</li>
<li><p>模块是TS中外部模块的简称，侧重于代码和重复利用</p>
</li>
<li><p>模块在其自身的作用于里执行，而不是在全局作用域下一个模块里的变量，函数，类等在外部是不可见的，除非把它导出</p>
</li>
<li><p>如果想要使用一个模块里导出的变量，则需要导入</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// a.ts</span></span><br><span class="line"><span class="keyword">export</span> &#123;&#125;;</span><br><span class="line"><span class="keyword">const</span> a1 = <span class="number">123</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// b.ts </span></span><br><span class="line"><span class="keyword">const</span> a2 = a1; <span class="comment">// 找不到名称“a1”</span></span><br><span class="line"><span class="comment">// 就不能访问a1了，因为它处于的是局部的作用域下</span></span><br></pre></td></tr></table></figure>

</li>
</ul>
</li>
</ul>
<h2 id="命名空间"><a href="#命名空间" class="headerlink" title="命名空间"></a>命名空间</h2><ul>
<li><p>在代码量较大的情况下，为了避免命名空间冲突，可以将相似的函数，类，接口放置到命名空间内</p>
</li>
<li><p>命名空间可以将代码包裹起来，只对外暴露需要外部访问的对象，使用关键字<strong>export</strong></p>
</li>
<li><p>命名空间是内部模块，主要用于组织代码，避免命名冲突</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">namespace</span> a &#123;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">const</span> name: <span class="built_in">string</span> = <span class="string">'hchlq'</span>;</span><br><span class="line">    <span class="keyword">class</span> Animal &#123;</span><br><span class="line">        speak(name: <span class="built_in">string</span>): <span class="built_in">void</span> &#123;</span><br><span class="line">            <span class="built_in">console</span>.log(name);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">a.name; <span class="comment">// 可以访问</span></span><br><span class="line">a.Animal; <span class="comment">// 不可以访问，因为a命名空间没有导出Animal</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>命名</p>
<ul>
<li><p>一个命名空间本质上就是一个对象，它的作用是将一系列相关的全局变量组织到一个对象中</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">namespace</span> a  &#123;</span><br><span class="line">  <span class="keyword">export</span> <span class="keyword">const</span> b = <span class="number">123</span>;</span><br><span class="line">  <span class="keyword">export</span> name: <span class="built_in">string</span> = <span class="string">'hchlq'</span>;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 编译成</span></span><br><span class="line"><span class="keyword">var</span> a;</span><br><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params">a</span>) </span>&#123;</span><br><span class="line">  a.b = <span class="number">123</span>;</span><br><span class="line">  a.name = <span class="string">'hchlq'</span>;</span><br><span class="line">&#125;)(a || a = &#123;&#125;);</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

        
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block home" lang="en">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/11/22/Typescript/%E7%B1%BB%E5%9E%8B%E5%8F%98%E6%8D%A2/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/Typescript/images/avatar.gif">
      <meta itemprop="name" content="HC">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Typescript">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          
            <a href="/Typescript/2020/11/22/Typescript/%E7%B1%BB%E5%9E%8B%E5%8F%98%E6%8D%A2/" class="post-title-link" itemprop="url">Typescript/类型变换</a>
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>
              

              <time title="Created: 2020-11-22 12:58:04 / Modified: 21:13:21" itemprop="dateCreated datePublished" datetime="2020-11-22T12:58:04+08:00">2020-11-22</time>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h1 id="类型变换"><a href="#类型变换" class="headerlink" title="类型变换"></a>类型变换</h1><ul>
<li><p>类型推断</p>
<p>Tyepscript可以根据一些简单的规则推断变量的类型</p>
<ul>
<li><p>从右到左</p>
<ul>
<li>变量的类型可以从定义中推断</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 即使不写类型，也会自动推导出来</span></span><br><span class="line"><span class="keyword">let</span> name = <span class="string">'hchlq'</span>;  <span class="comment">// name是string类型</span></span><br><span class="line"><span class="keyword">let</span> age = <span class="number">18</span>; <span class="comment">// age是number类型</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>从底部流出</p>
<ul>
<li><p>返回值类型可以从return中推断</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fn = <span class="function">(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span></span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">'hchlq'</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 自动的从return中推断出fn的类型是 const fn: (name: string, age: number) =&gt; string</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>从左到右</p>
<ul>
<li>函数的参数和返回值类型也可以通过赋值的类型推断</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> IFn &#123;</span><br><span class="line">    (name: <span class="built_in">string</span>, age: <span class="built_in">number</span>): <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> fn2: IFn = <span class="function">(<span class="params">name, age</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">'hchlq'</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>对象内属性的自动推导</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  name: <span class="string">'hchlq'</span>,</span><br><span class="line">  age: <span class="number">18</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 推导成下面的类型</span></span><br><span class="line"><span class="keyword">const</span> obj: &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>交叉类型</p>
<ul>
<li><p>交叉类型是将多个类型合并成一个类型</p>
</li>
<li><p>这让我们可以把现有的多种类型跌跤到一起成为一种类型，它包含了所需的所有类型的特性</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> A &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> B &#123;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> C = A &amp; B;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> obj: C = &#123;</span><br><span class="line">    name: <span class="string">'hchlq'</span>,</span><br><span class="line">    age: <span class="number">18</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// obj需要同时满足A 和 B的接口</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>联合类型的交叉类型</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> a = <span class="built_in">number</span> | <span class="built_in">string</span>;</span><br><span class="line"><span class="keyword">type</span> b = <span class="built_in">number</span> | <span class="built_in">boolean</span>;</span><br><span class="line"><span class="keyword">type</span> c = a &amp; b;</span><br><span class="line"><span class="comment">// 得到的c 类型是number, 也就是说，联合类型的交叉类型是取他们的交集</span></span><br><span class="line"><span class="comment">// c 要同时满足a 和 b</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// --------------------- mixin</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">mixin</span>&lt;<span class="title">T</span> <span class="title">extends</span> <span class="title">Obj</span>, <span class="title">K</span> <span class="title">extends</span> <span class="title">Obj</span>&gt;(<span class="params">obj1: T, obj2: K</span>): <span class="title">T</span> &amp; <span class="title">K</span> </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> obj = &lt;T &amp; K&gt;&#123;&#125;;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> prop1 <span class="keyword">in</span> obj1) &#123;</span><br><span class="line">        (&lt;T&gt;obj)[prop1] = obj1[prop1];</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> prop2 <span class="keyword">in</span> obj2) &#123;</span><br><span class="line">        (&lt;K&gt;obj)[prop2] = obj2[prop2];</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> obj;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> obj1 = &#123;</span><br><span class="line">    name: <span class="string">'hchlq'</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> obj2 = &#123;</span><br><span class="line">    age: <span class="number">18</span></span><br><span class="line">&#125;</span><br><span class="line">mixin(obj1, obj2);</span><br></pre></td></tr></table></figure>
</li>
<li><p>typeof </p>
<ul>
<li><p><code>typeof 变量</code>在ts中是获取到这个变量 的类型</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    name: <span class="string">'hchlq'</span>,</span><br><span class="line">    age: <span class="number">18</span>,</span><br><span class="line">    sex: <span class="string">'male'</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> Temp = <span class="keyword">typeof</span> obj;</span><br><span class="line"><span class="comment">// 得到的类型是</span></span><br><span class="line"><span class="keyword">type</span> Temp = &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">    sex: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>keyof </p>
<ul>
<li><p>索引类型操作符</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> Person &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">    sex: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> person = keyof Person;</span><br><span class="line"><span class="comment">// 得到的类型是</span></span><br><span class="line"><span class="comment">// type person = "name" | "age" | "sex"</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>映射类型 <code>in</code></p>
<ul>
<li><p>在定义的时候用in操作符取批量定义类型中的属性</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> Person &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">    sex: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> Person2 =  &#123;</span><br><span class="line">    [key <span class="keyword">in</span> keyof Person]: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 注意的是，不能在接口中使用in操作符</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>条件类型</p>
<p>在定义泛型的时候添加逻辑分支，使泛型更加灵活</p>
<ul>
<li><p>定义条件类型</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> Animal &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> Person &#123;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">    eat():<span class="built_in">void</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// extends关键字就是T需要满足的类型</span></span><br><span class="line"><span class="comment">// 这里的意思是，如果T 满足 Person, 就返回Person类型，否则返回Animal</span></span><br><span class="line"><span class="keyword">type</span> Type&lt;T&gt; = T <span class="keyword">extends</span> Person ? Person : Animal;</span><br><span class="line"><span class="keyword">let</span> obj: Type&lt;Person&gt; = &#123;</span><br><span class="line">    age: <span class="number">18</span>,</span><br><span class="line">    eat() &#123;&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>条件类型的分发</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> a = <span class="built_in">number</span> | <span class="built_in">string</span> | <span class="built_in">boolean</span>;</span><br><span class="line"><span class="keyword">type</span> b = <span class="built_in">string</span>;</span><br><span class="line"><span class="comment">// 用联合类型T去看是否满足K类型，满足返回T, 否则返回never;</span></span><br><span class="line"><span class="comment">// 1 number extends string ? number : never </span></span><br><span class="line"><span class="comment">// 2 string extends string ? string : never</span></span><br><span class="line"><span class="comment">// 3 boolean extends string ? boolean : never</span></span><br><span class="line"><span class="comment">// 最终结果   never | string | never  =&gt; string  </span></span><br><span class="line"><span class="comment">// never与其他类型联合得到的其他类型</span></span><br><span class="line"><span class="keyword">type</span> c&lt;T, K&gt; = T <span class="keyword">extends</span> K ? T : never;</span><br><span class="line"><span class="keyword">let</span> t:c&lt;a, b&gt; = <span class="string">'hchlq'</span>;</span><br></pre></td></tr></table></figure>
</li>
<li><p>内置条件类型</p>
<ul>
<li><p>Exclude</p>
<p>表示从一组联合类型中排除掉特定的一个</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Exclude&lt;T, K&gt; = T <span class="keyword">extends</span> K ? never : K;</span><br><span class="line"><span class="keyword">type</span> MyExclude = Exclude&lt;<span class="built_in">string</span> | <span class="built_in">number</span>, <span class="built_in">number</span> &gt;;</span><br><span class="line"><span class="comment">// 表示从string | number 中排除掉number</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>Extract</p>
<p>从一组联合类型中选出特定的一个</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Extract&lt;T, K&gt; = T <span class="keyword">extends</span> K ? T : never;</span><br><span class="line"><span class="keyword">type</span> MyExtract = Extract&lt;<span class="built_in">string</span> | <span class="built_in">number</span>, <span class="built_in">string</span>&gt;;</span><br><span class="line"><span class="comment">// 表示从string | number中选出string</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>NonNullable</p>
<ul>
<li><p>从T中排除掉null和undefined</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> NonNullable&lt;T&gt; = T <span class="keyword">extends</span> (<span class="literal">null</span> | <span class="literal">undefined</span>) ? never : T; </span><br><span class="line"><span class="keyword">type</span> MyNonNullable = NonNullable&lt;<span class="built_in">string</span> | <span class="built_in">number</span> | <span class="literal">null</span> | <span class="literal">undefined</span>&gt;;</span><br><span class="line"><span class="comment">// 从 string number null undefined中排除掉null 和 undefined</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>ReturnType</p>
<ul>
<li><p>获取函数类型的返回值类型</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Fn = <span class="function">(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span></span>) =&gt;</span> <span class="built_in">void</span>; </span><br><span class="line"><span class="keyword">type</span> ReturnType&lt;T <span class="keyword">extends</span> (...args: <span class="built_in">any</span>) =&gt; <span class="built_in">any</span>&gt; = T <span class="keyword">extends</span> (...args: <span class="built_in">any</span>) =&gt; infer K ? K : <span class="built_in">any</span>;</span><br><span class="line"><span class="keyword">type</span> MyRetureType = ReturnType&lt;Fn&gt;;</span><br><span class="line"><span class="comment">// infer是关键字，表示在extends条件语句中待推断的类型变量，如果有的话，就返回回去，否则返回never</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>Parameters</p>
<ul>
<li><p>获取函数的参数类型</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Fn2 = <span class="function">(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span></span>) =&gt;</span> <span class="built_in">void</span>; </span><br><span class="line"><span class="keyword">type</span> Parameters&lt;T <span class="keyword">extends</span> (...args: <span class="built_in">any</span>) =&gt; <span class="built_in">any</span>&gt; = T <span class="keyword">extends</span> (...args: infer K) =&gt; <span class="built_in">any</span> ? K: never;</span><br><span class="line"><span class="keyword">type</span> MyParameters = Parameters&lt;Fn2&gt;;</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>InstanceType</p>
<p>获取构造函数类型的实例</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> Animal &#123;</span><br><span class="line">    <span class="keyword">public</span> name: <span class="built_in">string</span> = <span class="string">'hchlq'</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> InstanceType&lt;T <span class="keyword">extends</span> <span class="keyword">new</span> (...args: <span class="built_in">any</span>) =&gt; <span class="built_in">any</span>&gt; = T <span class="keyword">extends</span> <span class="keyword">new</span> (...args: <span class="built_in">any</span>) =&gt; infer K ? K : <span class="built_in">any</span>;</span><br><span class="line"><span class="keyword">type</span> MyInstanceType = InstanceType&lt;<span class="keyword">typeof</span> Animal&gt;;</span><br></pre></td></tr></table></figure>
</li>
<li><p>元组类型转为联合类型</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Transfer&lt;T&gt; = T <span class="keyword">extends</span> <span class="built_in">Array</span>&lt;infer E&gt; ? E : never;</span><br><span class="line"><span class="keyword">type</span> Arr = Transfer&lt;[<span class="built_in">number</span>, <span class="built_in">string</span>, <span class="built_in">boolean</span>]&gt;;</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>内置工具类型</p>
<ul>
<li><p>一个 <code>readonly</code> 或 <code>?</code>修饰符在 <code>-</code>或<code>+</code>下可以表示减少或增加</p>
</li>
<li><p>Partial  </p>
<p>表示可以将必选改成必选</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> IPerson &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">    sex: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> Partial&lt;T <span class="keyword">extends</span> object&gt; = &#123;</span><br><span class="line">    [K <span class="keyword">in</span> keyof T]?: T[K]</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> Person = Partial&lt;IPerson&gt;;</span><br></pre></td></tr></table></figure>
</li>
<li><p>DeepPartial</p>
<p>深度变成可选的</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> IPerson &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">    msg: IMsg;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> DeepPartial&lt;T <span class="keyword">extends</span> object&gt; = &#123;</span><br><span class="line">    [K <span class="keyword">in</span> keyof T]?: T[K] <span class="keyword">extends</span> object ? DeepPartial&lt;T[K]&gt; : T[K];</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> Person = DeepPartial&lt;IPerson&gt;;</span><br></pre></td></tr></table></figure>
</li>
<li><p>Required</p>
<p>必填</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> IPerson &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">    address: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> Required&lt;T <span class="keyword">extends</span> object&gt; = &#123;</span><br><span class="line">    [K <span class="keyword">in</span> keyof T]-?: T[K];</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> MyRequired = Required&lt;IPerson&gt;;</span><br></pre></td></tr></table></figure>
</li>
<li><p>Readonly</p>
<p>只读属性</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> IPerson &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">    address: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> Readonly&lt;T <span class="keyword">extends</span> object&gt; = &#123;</span><br><span class="line">    readonly [K <span class="keyword">in</span> keyof T]: T[K];</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> MyReadOnly = Readonly&lt;IPerson&gt;;</span><br></pre></td></tr></table></figure>
</li>
<li><p>Pick</p>
<p>从对象接口中选取特定的一个属性， 也称精挑细选</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> IPerson &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">    address: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> Pick&lt;T, K <span class="keyword">extends</span> keyof T&gt; = &#123;</span><br><span class="line">    <span class="comment">// U in K 表示遍历 K, U作为属性</span></span><br><span class="line">    [U <span class="keyword">in</span> K]: T[U]</span><br><span class="line">&#125; </span><br><span class="line"><span class="keyword">type</span> MyPick = Pick&lt;IPerson, <span class="string">'name'</span>&gt;;</span><br></pre></td></tr></table></figure>
</li>
<li><p>Record</p>
<p>描述一个对象的key 和value</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> IPerson &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">    address: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> Record&lt;T <span class="keyword">extends</span> keyof <span class="built_in">any</span>, K&gt; = &#123;</span><br><span class="line">    [U <span class="keyword">in</span> T]: K</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> MyRecord = Record&lt;<span class="built_in">string</span>, <span class="built_in">number</span> | <span class="built_in">boolean</span>&gt;;</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>自定义高级类型</p>
<ul>
<li><p>Proxy</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Proxy&lt;T&gt; = &#123;</span><br><span class="line">    <span class="keyword">get</span>(): T;</span><br><span class="line">    <span class="keyword">set</span>(value: T): <span class="built_in">any</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>SetDifference&lt;T, K&gt;</p>
<p>两个联合类型中不一样的部分</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> SetDifference&lt;T, K&gt; = T <span class="keyword">extends</span> K ? never : T;</span><br><span class="line"><span class="keyword">type</span> MySetDifference = SetDifference&lt;<span class="built_in">string</span> | <span class="built_in">number</span> | <span class="built_in">boolean</span>, <span class="built_in">string</span>&gt;;</span><br></pre></td></tr></table></figure>
</li>
<li><p>Omit &lt;T, K&gt;</p>
<p>忽略掉对象的某个属性</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> IPerson &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">    address: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> Omit&lt;T, K <span class="keyword">extends</span> keyof <span class="built_in">any</span>&gt; = Pick&lt;T, Exclude&lt;keyof T, K&gt;&gt;;</span><br><span class="line"><span class="keyword">type</span> MyOmit = Omit&lt;IPerson, <span class="string">'name'</span>&gt;;</span><br></pre></td></tr></table></figure>
</li>
<li><p>Diff </p>
<p>得到两个类型对象中不同的部分， 有优先级，谁在前就以谁为标准去比较</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> IPerson &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">    address: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> IPerson2 &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 以 IPerson为准，筛选掉IPerson有， IPerson2中没有的部分，两个都有的去掉</span></span><br><span class="line"><span class="keyword">type</span> Diff&lt;T, K&gt; = Pick&lt;T, Exclude&lt;keyof T, keyof K&gt;&gt;;</span><br><span class="line"><span class="keyword">type</span> MyDiff = Diff&lt;IPerson, IPerson2&gt;;</span><br></pre></td></tr></table></figure>
</li>
<li><p>Intersection</p>
<p>两个类型对象的交集</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> IPerson &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">    address: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> IPerson2 &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> intersection&lt;T <span class="keyword">extends</span> object, K <span class="keyword">extends</span> object&gt; = Pick&lt;T, Extract&lt;keyof T, keyof K&gt;&gt;;</span><br><span class="line"><span class="keyword">type</span> MyInterction = intersection&lt;IPerson, IPerson2&gt;;</span><br></pre></td></tr></table></figure>
</li>
<li><p>Overwirite</p>
<p>覆盖</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> IPerson &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">    address: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> IPerson2 &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    age: <span class="built_in">boolean</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> Computed&lt;T <span class="keyword">extends</span> object&gt; = &#123;</span><br><span class="line">    [K <span class="keyword">in</span> keyof T]: T[K]</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> Overwrite&lt;T <span class="keyword">extends</span> object, K <span class="keyword">extends</span> object&gt; = T &amp; Omit&lt;K, keyof T&gt;;</span><br><span class="line"><span class="keyword">type</span> MyOverWrite = Computed&lt;Overwrite&lt;IPerson2, IPerson&gt;&gt;;</span><br></pre></td></tr></table></figure>
</li>
<li><p>Merge</p>
<p>合并</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> IPerson &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">    address: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> IPerson2 &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    age: <span class="built_in">boolean</span>;</span><br><span class="line">    sex: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> intersection&lt;T <span class="keyword">extends</span> object, K <span class="keyword">extends</span> object&gt; = Pick&lt;T, Extract&lt;keyof T, keyof K&gt;&gt;;</span><br><span class="line"><span class="keyword">type</span> Computed&lt;T <span class="keyword">extends</span> object&gt; = &#123;</span><br><span class="line">    [K <span class="keyword">in</span> keyof T]: T[K]</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> Merge&lt;T <span class="keyword">extends</span> object, K <span class="keyword">extends</span> object&gt; = K &amp; Omit&lt;T, keyof intersection&lt;T, K&gt;&gt;;</span><br><span class="line"><span class="comment">// 用IPerson2去合并IPerson</span></span><br><span class="line"><span class="keyword">type</span> MyMerge = Computed&lt;Merge&lt;IPerson, IPerson2&gt;&gt;;</span><br></pre></td></tr></table></figure>
</li>
<li><p>Mutable</p>
<p>将只读属性的readonly去掉</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> IPerson2 &#123;</span><br><span class="line">    readonly name: <span class="built_in">string</span>;</span><br><span class="line">    readonly age: <span class="built_in">boolean</span>;</span><br><span class="line">    sex: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> Mutable&lt;T <span class="keyword">extends</span> object&gt; = &#123;</span><br><span class="line">    -readonly [K <span class="keyword">in</span> keyof T]: T[K]</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> MyMutable = Mutable&lt;IPerson2&gt;</span><br></pre></td></tr></table></figure>





</li>
</ul>
</li>
</ul>
</li>
</ul>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

        
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block home" lang="en">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/11/21/Typescript/%E7%B1%BB%E5%9E%8B%E4%BF%9D%E6%8A%A4/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/Typescript/images/avatar.gif">
      <meta itemprop="name" content="HC">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Typescript">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          
            <a href="/Typescript/2020/11/21/Typescript/%E7%B1%BB%E5%9E%8B%E4%BF%9D%E6%8A%A4/" class="post-title-link" itemprop="url">Typescript/类型保护</a>
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>
              

              <time title="Created: 2020-11-21 11:54:55 / Modified: 12:52:26" itemprop="dateCreated datePublished" datetime="2020-11-21T11:54:55+08:00">2020-11-21</time>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h1 id="类型保护"><a href="#类型保护" class="headerlink" title="类型保护"></a>类型保护</h1><ul>
<li><p>定义</p>
<ul>
<li>类型保护就是一些表达式，他们在编译的时候就能通过类型信息确保某个作用域内变量的类型</li>
<li>类型保护就是通过关键字判断出分支中的类型</li>
<li>主要分为 <code>typeof</code>, <code>instanceof</code>, <code>null保护</code>, <code>链判断 ?.</code>,<code>可辨识的联合类型</code>, <code>类型字面量 + 可辨识联合类型</code>, <code>in操作符</code></li>
</ul>
</li>
<li><p>typeof </p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Type = <span class="built_in">string</span> | <span class="built_in">number</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> IFunc &#123;</span><br><span class="line">    (name: Type): <span class="built_in">void</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> fn: IFunc = (name: Type): <span class="function"><span class="params">void</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> name === <span class="string">'string'</span>) &#123;</span><br><span class="line">        <span class="comment">// name.就有string类型的方法的代码提示了</span></span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">typeof</span> name === <span class="string">'number'</span>) &#123;</span><br><span class="line">        <span class="comment">// name.就有number类型的方法的代码提示了</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">fn(<span class="string">'name'</span>);</span><br></pre></td></tr></table></figure>
</li>
<li><p>instanceof</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> Person &#123;</span><br><span class="line">    <span class="keyword">public</span> name: <span class="built_in">string</span> = <span class="string">'hchlq'</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> Animal &#123;</span><br><span class="line">    <span class="keyword">public</span> age: <span class="built_in">number</span> = <span class="number">18</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getType</span>(<span class="params">Ctor: Person | Animal</span>):<span class="title">void</span> </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (Ctor <span class="keyword">instanceof</span> Person) &#123;</span><br><span class="line">        <span class="comment">// Ctor.  就有提示了</span></span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (Ctor <span class="keyword">instanceof</span> Animal) &#123;</span><br><span class="line">        <span class="comment">// Ctor.  就有提示了</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> person = <span class="keyword">new</span> Person();</span><br><span class="line"><span class="keyword">const</span> animal = <span class="keyword">new</span> Animal();</span><br><span class="line">getType(person);</span><br></pre></td></tr></table></figure>
</li>
<li><p>null 保护</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getName</span>(<span class="params">name: <span class="built_in">string</span> | <span class="literal">null</span></span>):<span class="title">void</span> </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (name !== <span class="literal">null</span>) &#123;</span><br><span class="line">        <span class="comment">// 可以 name.提示了</span></span><br><span class="line">        <span class="comment">// todo...</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">// todo...ts</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 或者用如下方式 </span></span><br><span class="line">    name = name || <span class="string">''</span>;</span><br><span class="line">    <span class="comment">// name.</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>链判断 <code>?.</code>运算符</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">a?.b;  &#x2F;&#x2F; 表示的是，如果a不存在, 那么返回undefined, 否则返回a.b的是</span><br><span class="line">a?.[x]; &#x2F;&#x2F; 表示的是，如果a不存在，那么返回undefined, 否则返回a[x]的值</span><br><span class="line">a?.b(); &#x2F;&#x2F; 表示的是，如果a不存在，那么返回undefined, 否则返回a.b()的值</span><br><span class="line">a?.(); &#x2F;&#x2F; 表示的是，如果a不存在，那么返回undefined, 否则返回a()的值</span><br></pre></td></tr></table></figure>
</li>
<li><p>可辨识的联合类型</p>
<ul>
<li><p>利用联合类型中的共有字段进行类型保护的一种技巧</p>
</li>
<li><p>相同字段的不同取值就是可辨识</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> IA &#123;</span><br><span class="line">    name: <span class="string">'hc'</span>,</span><br><span class="line">    dd: <span class="number">19</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> IB &#123;</span><br><span class="line">    name: <span class="string">'hlq'</span>,</span><br><span class="line">    hh: <span class="number">19</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> Type = IA | IB;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getType</span>(<span class="params">ctor: Type</span>):<span class="title">void</span> </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (ctor.name === <span class="string">'hc'</span>) &#123;</span><br><span class="line">        <span class="comment">// ctor. dd | name </span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">// ctor. hh | name</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>in 判断符</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> Cat &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> Dog &#123;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> Type = Cat | Dog;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getType</span>(<span class="params">ctor: Type</span>):<span class="title">void</span> </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="string">'name'</span> <span class="keyword">in</span> ctor) &#123;</span><br><span class="line">        <span class="comment">// ctor.</span></span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span>(<span class="string">'age'</span> <span class="keyword">in</span> ctor) &#123;</span><br><span class="line">        <span class="comment">// ctor.</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>parameterName in Type</code>这种形式，parameterName必须是来自当前函数的一个参数</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> Cat &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> Dog &#123;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> Type = Cat | Dog;ts</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getType</span>(<span class="params">ctor: Type</span>):<span class="title">ctor</span> <span class="title">is</span> <span class="title">Cat</span> </span>&#123;</span><br><span class="line">    <span class="comment">// return (&lt;Cat&gt;ctor).name === 'hc';</span></span><br><span class="line">    <span class="keyword">return</span> (ctor <span class="keyword">as</span> Cat).name === <span class="string">'hc'</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>unknown </p>
<ul>
<li><p>unknown是any的安全类型，对unknown类型的值操作前，必须进行某种类型的检查。而在对any类型进行操作前，是没有进行检查的。</p>
</li>
<li><p>unknown类型只能赋给any和unknown类型本身</p>
</li>
<li><p>unknown类型不能.xx, 不能调用, unknown类型只能进行等或不等操作，不能进行其他操作</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> name: unknown = &#123;a: <span class="number">1</span>&#125;;</span><br><span class="line"><span class="keyword">let</span> name1: <span class="built_in">any</span> = name;</span><br><span class="line"><span class="keyword">let</span> name2: unknown = name;</span><br><span class="line"><span class="keyword">let</span> name3: <span class="built_in">string</span> = name; <span class="comment">// 报错</span></span><br><span class="line"><span class="keyword">let</span> name4: <span class="built_in">number</span> = name; <span class="comment">// 报错</span></span><br><span class="line"><span class="keyword">let</span> name5: <span class="built_in">boolean</span> = name; <span class="comment">// 报错</span></span><br><span class="line"><span class="keyword">let</span> name6: symbol = name; <span class="comment">// 报错</span></span><br><span class="line"><span class="keyword">let</span> name7: <span class="literal">null</span> = name; <span class="comment">// 报错</span></span><br><span class="line"><span class="keyword">let</span> name8: <span class="literal">undefined</span> = name; <span class="comment">// 报错</span></span><br><span class="line">name.xx; <span class="comment">// 报错</span></span><br><span class="line">name(); <span class="comment">// 报错</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>联合类型中的unknown类型</p>
<p>在联合类型中, unknown类型会吸收任何类型，这意味着任意类型与unknown类型联合，都是unknown类型</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> T1 = <span class="built_in">number</span> | unknown; <span class="comment">// unknown</span></span><br><span class="line"><span class="keyword">type</span> T2 = <span class="built_in">boolean</span> | unknown; <span class="comment">// unknown</span></span><br><span class="line"><span class="keyword">type</span> T3 = <span class="built_in">string</span> | unknown; <span class="comment">// unknown</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>交叉类型的unknown类型</p>
<p>在交叉类型中，任何类型都可以吸收unknown类型。将任意类型交unknown类型都得到哪个任意类型</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> T1 = <span class="built_in">number</span> &amp; unknown ;<span class="comment">// number</span></span><br><span class="line"><span class="keyword">type</span> T2 = <span class="built_in">boolean</span> &amp; unknown; <span class="comment">// boolean</span></span><br><span class="line"><span class="keyword">type</span> T3 = <span class="built_in">string</span> &amp; unknown ;<span class="comment">// string</span></span><br></pre></td></tr></table></figure>



</li>
</ul>
</li>
</ul>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

        
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block home" lang="en">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/11/21/Typescript/%E7%B1%BB/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/Typescript/images/avatar.gif">
      <meta itemprop="name" content="HC">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Typescript">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          
            <a href="/Typescript/2020/11/21/Typescript/%E7%B1%BB/" class="post-title-link" itemprop="url">Typescript/类</a>
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>

              <time title="Created: 2020-11-21 11:51:29" itemprop="dateCreated datePublished" datetime="2020-11-21T11:51:29+08:00">2020-11-21</time>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h1 id="类"><a href="#类" class="headerlink" title="类"></a>类</h1><p>定义: 类是面向对象语言的一种特定的类型，是es6开始在javascript中出现</p>
<p>tsconfig.json中,有一个选项是 strictPropertyInitialization, 表示启用类属性初始化的严格检查</p>
<ul>
<li><p>定义一个类</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> Animal &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    <span class="keyword">constructor</span>(<span class="params">name: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">        <span class="keyword">this</span>.name = name;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>存取器</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> Animal &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">    <span class="keyword">constructor</span>(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span></span>) &#123;</span><br><span class="line">        <span class="keyword">this</span>.name = name;</span><br><span class="line">        <span class="keyword">this</span>.age = age;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">get</span> iAge() &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.age;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">set</span>(newAge: <span class="built_in">number</span>) &#123;</span><br><span class="line">        <span class="keyword">this</span>.age = newAge;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(animal.iAge);<span class="comment">// 18</span></span><br><span class="line">animal.iAge = <span class="number">20</span>;</span><br><span class="line"><span class="built_in">console</span>.log(animal.iAge);<span class="comment">// 20</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>参数属性</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> Animal &#123;</span><br><span class="line">    <span class="comment">// 会自动成为类型属性</span></span><br><span class="line">    <span class="keyword">constructor</span>(<span class="params"><span class="keyword">public</span> iName: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">        <span class="keyword">this</span>.name = name;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">get</span> name() &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.iName;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">set</span> name(newName: <span class="built_in">string</span>) &#123;</span><br><span class="line">        <span class="keyword">this</span>.iName = newName</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> animal = <span class="keyword">new</span> Animal(<span class="string">'pig'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(animal.name);</span><br><span class="line">animal.name = <span class="string">'cat'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(animal.name);</span><br></pre></td></tr></table></figure>
</li>
<li><p>readonly 修饰符</p>
<p>readonly在编译时进行检查，const在运行是检查</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> Animal &#123;</span><br><span class="line">    <span class="keyword">public</span> readonly name: <span class="built_in">string</span> = <span class="string">'hchlq'</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> animal = <span class="keyword">new</span> Animal();</span><br><span class="line"><span class="built_in">console</span>.log(animal.name);</span><br><span class="line">animal.name = <span class="string">'hc'</span>;<span class="comment">// 报错</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>继承</p>
<ul>
<li>子类继承父类后子类的实例就拥有了父类中的属性和方法，可以增强代码的可复用性</li>
<li>将子类公有 的方法抽象到父类中去，自己的逻辑可以重写父类的该方法</li>
<li>super可以调用父类的属性和方法</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> Person &#123;</span><br><span class="line">    <span class="keyword">public</span> name: <span class="built_in">string</span>;</span><br><span class="line">    <span class="keyword">public</span> age: <span class="built_in">number</span>;</span><br><span class="line">    <span class="keyword">constructor</span>(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span></span>) &#123;</span><br><span class="line">        <span class="keyword">this</span>.name = name;</span><br><span class="line">        <span class="keyword">this</span>.age = age;</span><br><span class="line">    &#125;</span><br><span class="line">    getName():<span class="built_in">string</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'abd'</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> Student <span class="keyword">extends</span> Person &#123;</span><br><span class="line">    <span class="keyword">public</span> sex: <span class="built_in">string</span>;</span><br><span class="line">    <span class="keyword">constructor</span>(<span class="params">name:<span class="built_in">string</span>, age: <span class="built_in">number</span>, sex: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">        <span class="keyword">super</span>(name, age);</span><br><span class="line">        <span class="keyword">this</span>.sex = sex;</span><br><span class="line">        <span class="keyword">super</span>.getName();</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> student = <span class="keyword">new</span> Student(<span class="string">'hchlq'</span>, <span class="number">18</span>, <span class="string">'male'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(student.name, student.age, student.sex);</span><br></pre></td></tr></table></figure>
</li>
<li><p>类中的修饰符</p>
<ul>
<li><p>public 公有的  自己，子类和外部实例都可以访问</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> Animal &#123;</span><br><span class="line">    <span class="keyword">public</span> name: <span class="built_in">string</span> = <span class="string">'hchlq'</span>;</span><br><span class="line">    getName() &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="keyword">this</span>.name);<span class="comment">// hchlq</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> Cat <span class="keyword">extends</span> Animal &#123;</span><br><span class="line">    getFatherName() &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="keyword">this</span>.name);<span class="comment">// hchlq</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> animal = <span class="keyword">new</span> Animal();</span><br><span class="line"><span class="keyword">const</span> cat = <span class="keyword">new</span> Cat();</span><br><span class="line"><span class="built_in">console</span>.log(animal.name);<span class="comment">// hchlq</span></span><br><span class="line">animal.getName();</span><br></pre></td></tr></table></figure>
</li>
<li><p>protected 保护的  只有自己和子类可以访问</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> Animal &#123;</span><br><span class="line">    <span class="keyword">protected</span> name: <span class="built_in">string</span> = <span class="string">'hchlq'</span>;</span><br><span class="line">    getName() &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="keyword">this</span>.name);<span class="comment">// hchlq</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> Cat <span class="keyword">extends</span> Animal &#123;</span><br><span class="line">    getFatherName() &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="keyword">this</span>.name);<span class="comment">// hchlq</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> animal = <span class="keyword">new</span> Animal();</span><br><span class="line"><span class="keyword">const</span> cat = <span class="keyword">new</span> Cat();</span><br><span class="line"><span class="built_in">console</span>.log(animal.name);<span class="comment">// 报错</span></span><br><span class="line">animal.getName();</span><br></pre></td></tr></table></figure>
</li>
<li><p>private  私有的  只有自己可以访问</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> Animal &#123;</span><br><span class="line">    <span class="keyword">private</span> name: <span class="built_in">string</span> = <span class="string">'hchlq'</span>;</span><br><span class="line">    getName() &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="keyword">this</span>.name);<span class="comment">// hchlq</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> Cat <span class="keyword">extends</span> Animal &#123;</span><br><span class="line">    getFatherName() &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="keyword">this</span>.name);<span class="comment">// 报错</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> animal = <span class="keyword">new</span> Animal();</span><br><span class="line"><span class="keyword">const</span> cat = <span class="keyword">new</span> Cat();</span><br><span class="line"><span class="built_in">console</span>.log(animal.name);<span class="comment">// 报错</span></span><br><span class="line">animal.getName();</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>类上的静态属性和静态方法</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> Animal &#123;</span><br><span class="line">    <span class="keyword">static</span> myName: <span class="built_in">string</span> = <span class="string">'cat'</span>;</span><br><span class="line">    <span class="keyword">static</span> getName(name: <span class="built_in">string</span>):<span class="built_in">string</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> name;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(Animal.myName);</span><br><span class="line"><span class="keyword">const</span> r = Animal.getName(<span class="string">'hchlq'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(r);</span><br></pre></td></tr></table></figure>
</li>
<li><p>装饰器</p>
<p><strong>装饰器只能修饰类</strong></p>
<ul>
<li>装饰器是一种特殊类型的声明， 它能被附加到类声明，方法，属性和参数上，修改类的行为</li>
<li>常见的装饰器有类装饰器，属性装饰器，方法装饰器和参数装饰器</li>
<li>装饰器的写法分为普通装饰器和装饰器工厂</li>
</ul>
</li>
</ul>
<ul>
<li><p>普通类装饰器</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 普通装饰器</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">addMethod</span>(<span class="params">Ctor: <span class="built_in">Function</span></span>) </span>&#123;</span><br><span class="line">    Ctor.prototype.age = <span class="number">18</span>;</span><br><span class="line">    Ctor.prototype.getName = ():<span class="function"><span class="params">string</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'abac'</span>;</span><br><span class="line">    &#125; </span><br><span class="line">&#125;</span><br><span class="line"><span class="meta">@addMethod</span></span><br><span class="line"><span class="keyword">class</span> Animal1 &#123;</span><br><span class="line">    <span class="keyword">public</span> age!: <span class="built_in">number</span>;</span><br><span class="line">    <span class="keyword">public</span> getName!: <span class="function"><span class="params">()</span> =&gt;</span> <span class="built_in">string</span>;</span><br><span class="line">    <span class="keyword">public</span> name:<span class="built_in">string</span> = <span class="string">'hchlq'</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> animal = <span class="keyword">new</span> Animal1();</span><br><span class="line"><span class="built_in">console</span>.log(animal.name);</span><br><span class="line"><span class="built_in">console</span>.log(animal.age);</span><br><span class="line"><span class="built_in">console</span>.log(animal.getName());</span><br></pre></td></tr></table></figure>
</li>
<li><p>工厂装饰器</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">/ 装饰器工厂</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">addMethodFac</span>(<span class="params">msg: <span class="built_in">string</span></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(msg);</span><br><span class="line">    <span class="keyword">return</span> <span class="function">(<span class="params">Ctor: <span class="built_in">Function</span></span>) =&gt;</span> &#123;</span><br><span class="line">        Ctor.prototype.age = <span class="number">18</span>;</span><br><span class="line">        Ctor.prototype.getName = ():<span class="function"><span class="params">string</span> =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="string">'abac'</span>;</span><br><span class="line">        &#125; </span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="meta">@addMethodFac</span>(<span class="string">'hchlq'</span>)</span><br><span class="line"><span class="keyword">class</span> Animal1 &#123;</span><br><span class="line">    <span class="keyword">public</span> age!: <span class="built_in">number</span>;</span><br><span class="line">    <span class="keyword">public</span> getName!: <span class="function"><span class="params">()</span> =&gt;</span> <span class="built_in">string</span>;</span><br><span class="line">    <span class="keyword">public</span> name:<span class="built_in">string</span> = <span class="string">'hchlq'</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> animal = <span class="keyword">new</span> Animal1();</span><br><span class="line"><span class="built_in">console</span>.log(animal.name);</span><br><span class="line"><span class="built_in">console</span>.log(animal.age);</span><br><span class="line"><span class="built_in">console</span>.log(animal.getName());</span><br></pre></td></tr></table></figure>
</li>
<li><p>替换类装饰器</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 还可以替换类</span></span><br><span class="line"><span class="comment">// 返回的类结构要和传入的类的结构一样</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">addMethodFac</span>(<span class="params">constructor: <span class="built_in">Function</span></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">class</span> &#123;</span><br><span class="line">        <span class="keyword">public</span> age!: <span class="built_in">number</span>;</span><br><span class="line">        <span class="keyword">public</span> getName!: <span class="function"><span class="params">()</span> =&gt;</span> <span class="built_in">string</span>;</span><br><span class="line">        <span class="keyword">public</span> name: <span class="built_in">string</span> = <span class="string">'abc'</span>;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="meta">@addMethodFac</span></span><br><span class="line"><span class="keyword">class</span> Animal1 &#123;</span><br><span class="line">    <span class="keyword">public</span> age!: <span class="built_in">number</span>;</span><br><span class="line">    <span class="keyword">public</span> getName!: <span class="function"><span class="params">()</span> =&gt;</span> <span class="built_in">string</span>;</span><br><span class="line">    <span class="keyword">public</span> name: <span class="built_in">string</span> = <span class="string">'hchlq'</span>;ts</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> animal = <span class="keyword">new</span> Animal1();</span><br><span class="line"><span class="built_in">console</span>.log(animal.name);</span><br></pre></td></tr></table></figure>
</li>
<li><p>属性装饰器</p>
<ul>
<li>有两个参数<ul>
<li>第一个参数对于静态成员是类的构造函数，对实例成员是类的原型对象</li>
<li>第二个参数是属性的名字</li>
</ul>
</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> ProPertyType = <span class="built_in">Function</span> | object;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">enhanceProperty</span>(<span class="params">ctor: <span class="built_in">any</span>, name: <span class="built_in">string</span></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> tempName: <span class="built_in">string</span> = ctor[name];</span><br><span class="line">    <span class="built_in">Object</span>.defineProperty(ctor, name, &#123;</span><br><span class="line">        <span class="keyword">get</span>(): <span class="built_in">string</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> tempName.toUpperCase();</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="keyword">set</span>(newName: <span class="built_in">string</span>) &#123;</span><br><span class="line">            tempName = newName;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> Animal1 &#123;</span><br><span class="line">    <span class="meta">@enhanceProperty</span></span><br><span class="line">    <span class="keyword">static</span> sName: <span class="built_in">string</span> = <span class="string">'hc'</span>;</span><br><span class="line">    <span class="meta">@enhanceProperty</span></span><br><span class="line">    <span class="keyword">public</span> name: <span class="built_in">string</span> = <span class="string">'hchlq'</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> animal = <span class="keyword">new</span> Animal1();</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(animal.name, Animal1.sName);</span><br></pre></td></tr></table></figure>
</li>
<li><p>方法装饰器</p>
<ul>
<li>三个参数<ul>
<li>第一个参数: 如果是静态方法，那么就是类本身，如果是实例方法，那么就是类的原型对象</li>
<li>第二个参数: 是方法的名字</li>
<li>第三个是方法描述符</li>
</ul>
</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">enhanceMethod</span>(<span class="params">ctor: <span class="built_in">any</span>, name: <span class="built_in">string</span>, descriptor: PropertyDescriptor</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(ctor, name, descriptor);</span><br><span class="line">    descriptor.value();</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> Animal1 &#123;</span><br><span class="line">    <span class="keyword">public</span> name: <span class="built_in">string</span> = <span class="string">'hchlq'</span>;</span><br><span class="line">    <span class="meta">@enhanceMethod</span></span><br><span class="line">    getName(): <span class="built_in">string</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'hchlq'</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> animal = <span class="keyword">new</span> Animal1();</span><br></pre></td></tr></table></figure>
</li>
<li><p>参数装饰器</p>
<ul>
<li>三个参数<ul>
<li>第一个参数: 如果是静态成员是类的构造函数，对于实例成员是类的原型对象</li>
<li>第二个参数: 参数的名字</li>
<li>第三个参数: 参数在参数列表的索引</li>
</ul>
</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">enhanceParam</span>(<span class="params">ctor: <span class="built_in">any</span>, name: <span class="built_in">string</span>, index:<span class="built_in">number</span></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(ctor, name, index);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> Animal1 &#123;</span><br><span class="line">    <span class="keyword">public</span> name: <span class="built_in">string</span> = <span class="string">'hchlq'</span>;</span><br><span class="line">    getName(age: <span class="built_in">number</span>, <span class="meta">@enhanceParam</span> sex: <span class="built_in">string</span>): <span class="built_in">string</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.name;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>装饰器执行顺序</p>
<ol>
<li>参数装饰器   多个参数的顺序是: 从最后一个参数开始</li>
<li>方法装饰器  多个装饰器对一个方法时，顺序是从下到上 (谁先靠近方法，谁先执行)</li>
<li>类装饰器  多个装饰器对一个类时, 顺序是从下到上  (谁先靠近类，谁先执行)</li>
</ol>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">enhanceMethod1</span>(<span class="params">ctor: <span class="built_in">any</span>, name: <span class="built_in">string</span>, descriptor: PropertyDescriptor</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'方法装饰器1'</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">enhanceMethod2</span>(<span class="params">ctor: <span class="built_in">any</span>, name: <span class="built_in">string</span>, descriptor: PropertyDescriptor</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'方法装饰器2'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">enhanceParam1</span>(<span class="params">ctor: <span class="built_in">any</span>, name: <span class="built_in">string</span>, index: <span class="built_in">number</span></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'参数装饰器1'</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">enhanceParam2</span>(<span class="params">ctor: <span class="built_in">any</span>, name: <span class="built_in">string</span>, index: <span class="built_in">number</span></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'参数装饰器2'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">addMethod2</span>(<span class="params">Ctor: <span class="built_in">Function</span></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'类装饰器2'</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">addMethod1</span>(<span class="params">Ctor: <span class="built_in">Function</span></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'类装饰器1'</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="meta">@addMethod1</span></span><br><span class="line"><span class="meta">@addMethod2</span></span><br><span class="line"><span class="keyword">class</span> Animal1 &#123;</span><br><span class="line">    <span class="meta">@enhanceProperty</span></span><br><span class="line">    <span class="keyword">public</span> name: <span class="built_in">string</span> = <span class="string">'hchlq'</span>;</span><br><span class="line">    <span class="meta">@enhanceMethod1</span></span><br><span class="line">    <span class="meta">@enhanceMethod2</span></span><br><span class="line">    getName(<span class="meta">@enhanceParam1</span> age: <span class="built_in">number</span>, <span class="meta">@enhanceParam2</span> sex: <span class="built_in">string</span>): <span class="built_in">string</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.name;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> animal = <span class="keyword">new</span> Animal1();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 输出</span></span><br><span class="line">参数装饰器<span class="number">2</span></span><br><span class="line">参数装饰器<span class="number">1</span></span><br><span class="line">方法装饰器<span class="number">2</span></span><br><span class="line">方法装饰器<span class="number">1</span></span><br><span class="line">类装饰器<span class="number">2</span></span><br><span class="line">类装饰器<span class="number">1</span></span><br></pre></td></tr></table></figure>

</li>
</ul>
<ul>
<li><p>抽象类</p>
<ul>
<li>抽象描述一种抽象的概念，无法被实例化，只能被继承</li>
<li>无法创建抽象类的实例</li>
<li>抽象方法不能在抽象类中实现，只能在抽象类的子类中去实现，并且是必须实现</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> &#123;&#125;;</span><br><span class="line"><span class="keyword">abstract</span> <span class="keyword">class</span> Person &#123;</span><br><span class="line">    name!: <span class="built_in">string</span>;</span><br><span class="line">    <span class="keyword">abstract</span> speak():<span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> Teacher <span class="keyword">extends</span> Person &#123;</span><br><span class="line">    <span class="keyword">public</span> name: <span class="built_in">string</span> = <span class="string">'hchlq'</span>;</span><br><span class="line">    speak():<span class="built_in">string</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'--'</span>)</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'abc'</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>抽象方法</p>
<ul>
<li>必须出现在抽象类中</li>
<li>如果抽象类中的方法不加abstract修饰，那么必须在抽象类中实现</li>
<li>如果抽象类中加了abstract修饰，那么必须在子类中去实现，并且必须要实现</li>
<li>子类可以对抽象方法进行不同的实现</li>
</ul>
</li>
<li><p>与类有关的修饰符</p>
<ul>
<li>访问控制修饰符<ul>
<li>public</li>
<li>protected</li>
<li>private</li>
</ul>
</li>
<li>静态属性<ul>
<li>static</li>
</ul>
</li>
<li>抽象类、抽象方法<ul>
<li>abstract</li>
</ul>
</li>
</ul>
</li>
<li><p>重写和重载的区别</p>
<ul>
<li><p>重写是指子类对父类的方法进行重写</p>
</li>
<li><p>重载是指为同一个函数提供多个类型定义</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 重写</span></span><br><span class="line"><span class="keyword">class</span> Animal &#123;</span><br><span class="line">    speak():<span class="built_in">void</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'动物'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> Cat <span class="keyword">extends</span> Animal &#123;</span><br><span class="line">    speak():<span class="built_in">void</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'猫'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> Dog <span class="keyword">extends</span> Animal &#123;</span><br><span class="line">    speak():<span class="built_in">void</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'狗'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 重载</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">name: <span class="built_in">string</span></span>):<span class="title">void</span></span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">name: <span class="built_in">number</span></span>):<span class="title">void</span></span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">name: <span class="built_in">any</span></span>):<span class="title">void</span> </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> name === <span class="string">'string'</span>) &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'string'</span>);</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">typeof</span> name === <span class="string">'number'</span>) &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'number'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>继承和多态</p>
<ul>
<li><p>继承: 子类继承父类，子类除了拥有父类的所有特性之外，还可以实现自己的特性</p>
</li>
<li><p>多态: 由继承产生了相关了不同的类，对同一个方法有不同的行为</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> Home &#123;</span><br><span class="line">    speak():<span class="built_in">void</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'aaa'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> ClassRoom <span class="keyword">extends</span> Home &#123;</span><br><span class="line">    speak():<span class="built_in">void</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'class Room'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> Desk <span class="keyword">extends</span> ClassRoom &#123;</span><br><span class="line">    speak():<span class="built_in">void</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'desk'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> cRoom = <span class="keyword">new</span> ClassRoom();</span><br><span class="line"><span class="keyword">const</span> desk = <span class="keyword">new</span> Desk();</span><br><span class="line"></span><br><span class="line">cRoom.speak();</span><br><span class="line">desk.speak();</span><br></pre></td></tr></table></figure>

</li>
</ul>
</li>
</ul>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

        
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block home" lang="en">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/11/21/Typescript/%E6%B3%9B%E5%9E%8B/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/Typescript/images/avatar.gif">
      <meta itemprop="name" content="HC">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Typescript">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          
            <a href="/Typescript/2020/11/21/Typescript/%E6%B3%9B%E5%9E%8B/" class="post-title-link" itemprop="url">Typescript/泛型</a>
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>

              <time title="Created: 2020-11-21 11:51:29" itemprop="dateCreated datePublished" datetime="2020-11-21T11:51:29+08:00">2020-11-21</time>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h1 id="泛型"><a href="#泛型" class="headerlink" title="泛型"></a>泛型</h1><ul>
<li><p>定义</p>
<ul>
<li>泛型指的是在定义函数，接口或类的时候，不与先指定具体的类型，而是在使用的时候再指定类型的一种特性</li>
<li>泛型作用域只能作用域函数内部使用</li>
</ul>
</li>
<li><p>泛型函数</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建长度确定的数组，填充传入的值</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createArray</span>(<span class="params">length: <span class="built_in">number</span>, value: <span class="built_in">any</span></span>):<span class="title">Array</span>&lt;<span class="title">any</span>&gt; </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> arr:<span class="built_in">Array</span>&lt;<span class="built_in">any</span>&gt; = [];</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; length; i ++) &#123;</span><br><span class="line">        arr.push(value);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> arr;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> arr = createArray(<span class="number">3</span>, <span class="string">'11'</span>);</span><br><span class="line"><span class="comment">// 如果是any, 是没有提示的，为了具有提示，因此要指定类型，但是有不确定是那些类型，只能在使用传入的时候，才知道，因此要使用泛型</span></span><br><span class="line"><span class="comment">//arr[0].</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// ---------------------</span></span><br><span class="line"><span class="comment">// 创建长度确定的数组，填充传入的值</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createArray</span>&lt;<span class="title">T</span>&gt;(<span class="params">length: <span class="built_in">number</span>, value: T</span>):<span class="title">Array</span>&lt;<span class="title">T</span>&gt; </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> arr:<span class="built_in">Array</span>&lt;T&gt; = [];</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; length; i ++) &#123;</span><br><span class="line">        arr.push(value);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> arr;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> arr = createArray&lt;<span class="built_in">number</span>&gt;(<span class="number">3</span>, <span class="number">22</span>);</span><br><span class="line"><span class="comment">// arr[0].的时候，就有该类型具有的方法的提示啦</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>泛型类</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> Animal&lt;T&gt; &#123;</span><br><span class="line">    <span class="keyword">public</span> arr: T[] = [];</span><br><span class="line">    addValue(value: T) &#123;</span><br><span class="line">        <span class="keyword">this</span>.arr.push(value);</span><br><span class="line">    &#125;</span><br><span class="line">    getValue():T &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.arr[<span class="number">0</span>];</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> animal = <span class="keyword">new</span> Animal&lt;<span class="built_in">number</span>&gt;();</span><br></pre></td></tr></table></figure>
</li>
<li><p>泛型与new</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> Animal2 &#123;</span><br><span class="line">    <span class="keyword">public</span> name:<span class="built_in">string</span> = <span class="string">'hchlq'</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getType</span>&lt;<span class="title">T</span>&gt;(<span class="params">ctor: <span class="keyword">new</span>() =&gt; T</span>):<span class="title">T</span> </span>&#123;</span><br><span class="line">	<span class="comment">// 或者ctor: &#123;new (): T&#125;</span></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> ctor();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">getType(Animal2);</span><br></pre></td></tr></table></figure>
</li>
<li><p>泛型接口</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">interface</span> IFunc&lt;T&gt; &#123;</span><br><span class="line">    &lt;T&gt;(name: T): T;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> fn: IFunc&lt;<span class="built_in">string</span>&gt; = <span class="function">(<span class="params">name</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">'hchlq'</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 或者</span></span><br><span class="line"><span class="keyword">interface</span> IFunc &#123;</span><br><span class="line">    &lt;T&gt;(name: T): T;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> fn2:IFunc = <span class="function"><span class="keyword">function</span>&lt;<span class="title">T</span>&gt; (<span class="params">name: T</span>):<span class="title">T</span> </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> name;</span><br><span class="line">&#125;</span><br><span class="line">fn2&lt;<span class="built_in">number</span>&gt;(<span class="number">123</span>);</span><br></pre></td></tr></table></figure>
</li>
<li><p>多类型泛型</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">swap</span>&lt;<span class="title">A</span>, <span class="title">B</span>&gt; (<span class="params">arr: [A, B]</span>):[<span class="title">B</span>, <span class="title">A</span>] </span>&#123;</span><br><span class="line">      <span class="keyword">return</span> [arr[<span class="number">1</span>], arr[<span class="number">0</span>]];</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">swap&lt;<span class="built_in">number</span>, <span class="built_in">number</span>&gt;([<span class="number">1</span>, <span class="number">2</span>]);</span><br></pre></td></tr></table></figure>
</li>
<li><p>默认参数类型</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getVal</span>&lt;<span class="title">A</span> = <span class="title">string</span>&gt; (<span class="params">value: A</span>): <span class="title">A</span> </span>&#123;</span><br><span class="line">      <span class="keyword">return</span> value;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 默认不传递指定类型就是string</span></span><br><span class="line">getVal&lt;<span class="built_in">number</span>&gt;(<span class="number">123</span>);</span><br></pre></td></tr></table></figure>
</li>
<li><p>泛型约束</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getStringVal</span>&lt;<span class="title">T</span> <span class="title">extends</span> <span class="title">string</span>&gt;(<span class="params">val: T</span>):<span class="title">T</span> </span>&#123;</span><br><span class="line">   <span class="keyword">return</span> val;</span><br><span class="line">&#125;</span><br><span class="line">getStringVal(<span class="string">'hchlq'</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>泛型类型别名(与联合类型差不多)</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Person&lt;T&gt; = &#123;numbers: T[]&#125; | T[];</span><br><span class="line"><span class="keyword">type</span> IPerson = Person&lt;<span class="built_in">number</span>&gt;</span><br></pre></td></tr></table></figure>



</li>
</ul>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

        
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block home" lang="en">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/11/21/Typescript/%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/Typescript/images/avatar.gif">
      <meta itemprop="name" content="HC">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Typescript">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          
            <a href="/Typescript/2020/11/21/Typescript/%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B/" class="post-title-link" itemprop="url">Typescript/数据类型</a>
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>

              <time title="Created: 2020-11-21 11:51:29" itemprop="dateCreated datePublished" datetime="2020-11-21T11:51:29+08:00">2020-11-21</time>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h1 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h1><ul>
<li><p>数字类型 <code>number</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> age:number = <span class="number">18</span>;</span><br></pre></td></tr></table></figure>
</li>
<li><p>字符串类型<code>string</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> name:string = <span class="string">'hchlq'</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>布尔类型 <code>boolean</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> isPerson:boolean = <span class="literal">true</span>;</span><br></pre></td></tr></table></figure>
</li>
<li><p>数组类型 <code>Array&lt;string | number | ...&gt;</code> 或者  <code>number[] | string[] | ...</code></p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 这两个是等价的</span></span><br><span class="line"><span class="keyword">const</span> nameLists:<span class="built_in">Array</span>&lt;<span class="built_in">string</span>&gt; = [<span class="string">'zhangsan'</span>, <span class="string">'lisi'</span>, <span class="string">'wangwu'</span>];</span><br><span class="line"><span class="keyword">const</span> nameLists2:<span class="built_in">string</span>[] = [<span class="string">'zhangsan'</span>, <span class="string">'sili'</span>, <span class="string">'wangwu'</span>];</span><br><span class="line"><span class="comment">// 这里是等价的</span></span><br><span class="line"><span class="keyword">const</span> ageLists:<span class="built_in">Array</span>&lt;<span class="built_in">number</span>&gt; = [<span class="number">18</span>, <span class="number">19</span>, <span class="number">20</span>];</span><br><span class="line"><span class="keyword">const</span> ageLists2:<span class="built_in">number</span>[] = [<span class="number">18</span>, <span class="number">19</span>, <span class="number">20</span>];</span><br></pre></td></tr></table></figure>
</li>
<li><p>元组类型<code>[string, number, ...]</code></p>
<p>元组Tuple表示<strong>数量</strong>和<strong>类型</strong>都一样的数组</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> personalMsg:[string, number, boolean] = [<span class="string">'hchlq'</span>, <span class="number">18</span>, <span class="string">'yes'</span>];</span><br></pre></td></tr></table></figure>
</li>
<li><p>枚举类型  <code>enum xxx {}</code></p>
<ul>
<li><p>普通枚举</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">enum</span> Student &#123;</span><br><span class="line">	Girl,</span><br><span class="line">	Boy</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(Student.Girl); <span class="comment">// 0</span></span><br><span class="line"><span class="built_in">console</span>.log(Student.Boy);<span class="comment">// 1</span></span><br><span class="line"><span class="built_in">console</span>.log(Student[<span class="number">0</span>]); <span class="comment">// Girl</span></span><br><span class="line"><span class="built_in">console</span>.log(Student[<span class="number">1</span>]); <span class="comment">// Boy</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>常量枚举  </p>
<p>不能反推，也就是不能通过Student[0]推出Girl, 只能通过Student.Girl推出0</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="keyword">enum</span> Student &#123;</span><br><span class="line">	Girl,</span><br><span class="line">	Boy</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(Student.Girl); <span class="comment">// 0</span></span><br><span class="line"><span class="built_in">console</span>.log(Student.Boy);<span class="comment">// 1</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>任意类型 <code>any</code></p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> name:<span class="built_in">any</span>;</span><br><span class="line"><span class="comment">// name可以被赋予任意类型</span></span><br><span class="line">name = <span class="number">11</span>;</span><br><span class="line">name = <span class="string">'hchlq'</span>;</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>null</code> 和 <code>undefined</code></p>
<ul>
<li><p>tsconfig.json中，如果没有开启<code>strictNullChecks</code>， 那么null 和 undefined属于任意类型的子类型，可以赋给string , number等类型</p>
</li>
<li><p>如果开启了<code>strictNullChecks</code>, null和undefined只能赋给自己或者any类型</p>
</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a:<span class="built_in">string</span> = <span class="string">'aaa'</span>;</span><br><span class="line">a = <span class="literal">null</span> | <span class="literal">undefined</span>; <span class="comment">// 非strictNullChecks 下不会报错</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>空类型 <code>void</code></p>
<ul>
<li><p>表示没有任何类型，一般用于函数的返回值，如果没有任何返回值，那么可以用void标记</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> name:<span class="built_in">string</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">setName</span>(<span class="params">newName: <span class="built_in">string</span></span>):<span class="title">void</span> </span>&#123;</span><br><span class="line">    name = newName;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



</li>
</ul>
</li>
</ul>
<ul>
<li><p>在非strictNullChecks下， null和undefined可以赋给void类型</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> b:<span class="built_in">void</span>;</span><br><span class="line">b = <span class="literal">undefined</span>;</span><br><span class="line">b = <span class="literal">null</span>;</span><br></pre></td></tr></table></figure>

</li>
</ul>
<ul>
<li><p><code>never</code>类型</p>
<p>never是其他类型(null undefined)的子类型，表示不会出现的值,一般用于函数中抛出错误或者死循环</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">error</span>(<span class="params"></span>):<span class="title">never</span> </span>&#123;</span><br><span class="line">	<span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'error'</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">loop</span>(<span class="params"></span>):<span class="title">never</span> </span>&#123;</span><br><span class="line">	<span class="keyword">while</span>(<span class="literal">true</span>) &#123;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>never 和 void的区别<ul>
<li>void 可以被赋值为 null 和 undefined的类型。 never 则是一个不包含值的类型。</li>
<li>拥有 void 返回值类型的函数能正常运行。拥有 never 返回值类型的函数无法正常返回，无法终止，或会抛出异常。</li>
</ul>
</li>
</ul>
</li>
<li><p><code>symbol</code>类型</p>
<p>注意的是，使用symbol需要配置lib为Symbol, 否则编译不通过</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> d:symbol = Symbol(<span class="string">'aaa'</span>);</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>bigInt</code> 存储大类型的数字</p>
<ul>
<li>我们在使用 <code>BigInt</code> 的时候，必须添加 <code>ESNext</code> 的编译辅助库</li>
<li>要使用<code>1n</code>需要 <code>&quot;target&quot;: &quot;ESNext&quot;</code></li>
<li>number和 BigInt类型不一样,不兼容</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> max:bigint = BigInt(<span class="built_in">Number</span>.MAX_SAFE_INTEGER);</span><br></pre></td></tr></table></figure>
</li>
<li><p>类型推论</p>
<ul>
<li>我们在没有明标变量的类型的时候，会自动的帮我们推到出它的类型</li>
<li>定义时没有赋值，就会推导成any类型</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> name = <span class="string">'hchlq'</span>;</span><br><span class="line"><span class="keyword">let</span> age = <span class="number">18</span>;</span><br><span class="line"><span class="keyword">let</span> isMarried = <span class="literal">true</span>;</span><br><span class="line"><span class="keyword">let</span> b;</span><br><span class="line"><span class="comment">// 以上会自动推导出 string number boolean any</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>包装对象</p>
<ul>
<li>主要是针对原始数据类型 number string boolean null undefined symbol, 都没有方法</li>
<li>当调用基本类型的方法的时候，会迅速的在该类型的对象类型进行包装。</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> num:<span class="built_in">number</span> = <span class="number">123</span>;</span><br><span class="line"><span class="built_in">number</span>.fixed();</span><br><span class="line"><span class="keyword">const</span> str:<span class="built_in">string</span> = <span class="string">'hchlq'</span>;</span><br><span class="line">str.toLowerCase()</span><br></pre></td></tr></table></figure>
</li>
<li><p>联合类型  <code>string | number | boolean | ...</code></p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a:<span class="built_in">string</span> | <span class="built_in">number</span> | <span class="built_in">boolean</span>;</span><br></pre></td></tr></table></figure>
</li>
<li><p>类型断言</p>
<ul>
<li>可以将联合类型等断言成一个具体的类型， 后果有开发者承担</li>
<li>断言要满足<code>as</code>左右是兼容的， 比如 a as b  a要兼容b 或者 b要兼容a</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> b:<span class="built_in">string</span> | <span class="built_in">number</span> | <span class="built_in">boolean</span>;</span><br><span class="line">(b <span class="keyword">as</span> <span class="built_in">number</span>).xxx;</span><br></pre></td></tr></table></figure>

<ul>
<li><p>双重断言</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> name = <span class="string">'hchlq'</span> <span class="keyword">as</span> <span class="built_in">any</span> <span class="keyword">as</span> &#123;name: <span class="built_in">string</span>, age: <span class="built_in">number</span>&#125;;</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>自定义类型</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Color = <span class="string">'blue'</span> | <span class="string">'orange'</span> | <span class="string">'red'</span>;</span><br><span class="line"><span class="keyword">let</span> color: Color = <span class="string">'blue'</span>;</span><br></pre></td></tr></table></figure>
</li>
<li><p>自定义类型 vs 联合类型</p>
<ul>
<li>自定义类型只能是对应的几个值， 联合类型是几个类型的一种</li>
</ul>
</li>
</ul>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

        
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block home" lang="en">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/11/21/Typescript/%E6%8E%A5%E5%8F%A3/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/Typescript/images/avatar.gif">
      <meta itemprop="name" content="HC">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Typescript">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          
            <a href="/Typescript/2020/11/21/Typescript/%E6%8E%A5%E5%8F%A3/" class="post-title-link" itemprop="url">Typescript/接口</a>
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>

              <time title="Created: 2020-11-21 11:51:29" itemprop="dateCreated datePublished" datetime="2020-11-21T11:51:29+08:00">2020-11-21</time>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h1 id="接口-interface"><a href="#接口-interface" class="headerlink" title="接口 interface"></a>接口 interface</h1><ul>
<li><p>定义</p>
<ul>
<li>接口一方面可以在面向对象编程中表示<strong>行为的抽象</strong>，另外也可以用来描述<strong>对象的形状</strong></li>
<li>接口就是把一些类中公有的属性和方法抽象出来，可以用来约束实现此接口的类</li>
<li>一个类可以继承另一个类并实现多个接口</li>
<li>接口向插件一样是用来增强类的，而抽象类是具体类的抽象概念</li>
<li>一个类可以实现多个接口，一个接口也可以被多个类实现，但一个类的可以由多个子类，但只能有一个父类。</li>
</ul>
</li>
<li><p>对象的形状</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> IPerson&#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">    speak():<span class="built_in">void</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> obj:IPerson  = &#123;</span><br><span class="line">    name: <span class="string">'hchlq'</span>,</span><br><span class="line">    age: <span class="number">18</span>,</span><br><span class="line">    speak() &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'speak Chinese'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>行为的抽象</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> ISpeak &#123;</span><br><span class="line">    speak():<span class="built_in">void</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> IEat &#123;</span><br><span class="line">    eat():<span class="built_in">boolean</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> Person <span class="keyword">implements</span> ISpeak, IEat &#123;</span><br><span class="line">    eat() &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'eat'</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    speak() &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'speak'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>可索引接口</p>
<p>约束数组和对象的</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">  <span class="keyword">interface</span> IAny &#123;</span><br><span class="line">      [key: <span class="built_in">number</span>]: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>接口的继承</p>
<ul>
<li>一个接口可以继承另一个接口</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> IPerson1 &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> IPerson2 <span class="keyword">extends</span> IPerson1 &#123;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> obj:IPerson2 = &#123;</span><br><span class="line">    age: <span class="number">18</span>,</span><br><span class="line">    name: <span class="string">'hchlq'</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>readonly</p>
<p>定义可读的属性，不能修改</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> IPerson3 &#123;</span><br><span class="line">    readonly name: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> obj2: IPerson3 =  &#123;</span><br><span class="line">    name: <span class="string">'hchlq'</span></span><br><span class="line">&#125;</span><br><span class="line">obj2.name = <span class="string">'aa'</span>;<span class="comment">// 报错</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>约束函数接口</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> IPerson4  &#123;</span><br><span class="line">    (name: <span class="built_in">string</span>, age: <span class="built_in">number</span>):<span class="built_in">boolean</span>; <span class="comment">// 表示约束这个函数，参数有两个，name是string类型的, age是number类型, 返回的是布尔值</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> fn: IPerson4 = <span class="function">(<span class="params">name, age</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (name === <span class="string">'hchlq'</span> &amp;&amp; age === <span class="number">18</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>约束类的接口</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> IPerson5 &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">    eat(food: <span class="built_in">string</span>):<span class="built_in">boolean</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> Student <span class="keyword">implements</span> IPerson5 &#123;</span><br><span class="line">    <span class="keyword">public</span> name: <span class="built_in">string</span>;</span><br><span class="line">    <span class="keyword">public</span> age: <span class="built_in">number</span>;</span><br><span class="line">    <span class="keyword">constructor</span>(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span></span>) &#123;</span><br><span class="line">        <span class="keyword">this</span>.name = name; </span><br><span class="line">        <span class="keyword">this</span>.age = age;</span><br><span class="line">    &#125;</span><br><span class="line">    eat(food: <span class="built_in">string</span>):<span class="built_in">boolean</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (food === <span class="string">'apple'</span>) &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>约束构造函数</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">class</span> Animal &#123;</span><br><span class="line">    <span class="keyword">public</span> name: <span class="built_in">string</span>;</span><br><span class="line">    <span class="keyword">constructor</span>(<span class="params">name: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">        <span class="keyword">this</span>.name = name;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> IAnimalType &#123;</span><br><span class="line">    <span class="comment">// 表示的是，这个是一个可以new的类, 返回的是这个类的实例</span></span><br><span class="line">    <span class="comment">// 类本身是修饰实例的, 如果想要Animal当做值赋给变量的类型</span></span><br><span class="line">    <span class="comment">// const fn:tpeof Animal = Animal</span></span><br><span class="line">    <span class="keyword">new</span> (name: <span class="built_in">string</span>): Animal;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> fn2 = (ctor: IAnimalType):<span class="function"><span class="params">void</span> =&gt;</span> &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">fn2(Animal);</span><br></pre></td></tr></table></figure>
</li>
<li><p>抽象类 vs 接口</p>
<ul>
<li>不同类之间公有的属性或方法，可以抽象成一个接口，抽象类是提供其他类继承的基类，不允许被实例化。抽象类中的抽象方法和抽象属性必须在子类中实现</li>
<li>抽象类可以实现方法和初始化属性，接口只能描述形状，不能对属性和方法进行实现</li>
<li>一个类只能继承一个抽象类，但是可以实现多个接口</li>
<li>抽象类可以实现接口</li>
</ul>
</li>
</ul>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

        
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block home" lang="en">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/11/21/Typescript/%E5%87%BD%E6%95%B0/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/Typescript/images/avatar.gif">
      <meta itemprop="name" content="HC">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Typescript">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          
            <a href="/Typescript/2020/11/21/Typescript/%E5%87%BD%E6%95%B0/" class="post-title-link" itemprop="url">Typescript/函数</a>
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>

              <time title="Created: 2020-11-21 11:51:29" itemprop="dateCreated datePublished" datetime="2020-11-21T11:51:29+08:00">2020-11-21</time>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h1 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h1><ul>
<li><p>定义: 可以指定参数的类型和返回值的类型</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params">name: <span class="built_in">string</span></span>):<span class="title">string</span> </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> name + <span class="string">'abc'</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>定义函数的类型</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> FuncType = (name: <span class="built_in">string</span>, age: <span class="built_in">number</span>):<span class="built_in">boolean</span>;</span><br><span class="line"><span class="keyword">let</span> func:FuncType = <span class="function">(<span class="params">name, age</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>没有返回值</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> FuncType = <span class="function">(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span></span>) =&gt;</span> <span class="built_in">void</span>;</span><br><span class="line"><span class="keyword">let</span> func:FuncType = <span class="function">(<span class="params">name, age</span>) =&gt;</span> &#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>可选参数</p>
<p>可选参数一般放在参数的后面，如果不这样做，会编译不通过</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> FuncType = <span class="function">(<span class="params">name: <span class="built_in">string</span>, age?: <span class="built_in">number</span></span>) =&gt;</span> <span class="built_in">void</span>;</span><br><span class="line"><span class="keyword">let</span> func:FuncType = <span class="function">(<span class="params">name, age</span>) =&gt;</span> &#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>默认参数</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> FuncType = <span class="function">(<span class="params">name?: <span class="built_in">string</span>, age?: <span class="built_in">number</span></span>) =&gt;</span> <span class="built_in">void</span>;</span><br><span class="line"><span class="keyword">let</span> func:FuncType = <span class="function">(<span class="params">name='hchlq', age=18</span>) =&gt;</span> &#123;</span><br><span class="line">&#125;</span><br><span class="line">func();</span><br></pre></td></tr></table></figure>
</li>
<li><p>剩余参数</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> FuncNum = <span class="function">(<span class="params">a: <span class="built_in">number</span>, b: <span class="built_in">number</span>, ...args: <span class="built_in">Array</span>&lt;<span class="built_in">string</span>&gt;</span>) =&gt;</span> <span class="built_in">void</span></span><br><span class="line"><span class="keyword">const</span> fn:FuncNum = <span class="function">(<span class="params">a, b, ...args</span>) =&gt;</span> &#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>函数重载</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn2</span>(<span class="params">name: <span class="built_in">string</span></span>): <span class="title">void</span></span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn2</span>(<span class="params">name: <span class="built_in">number</span></span>): <span class="title">void</span></span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn2</span>(<span class="params">name: <span class="built_in">any</span></span>):<span class="title">void</span> </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> ret;</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> name === <span class="string">'string'</span>) &#123;</span><br><span class="line">        ret = <span class="string">'abc'</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">typeof</span> name === <span class="string">'number'</span>) &#123;</span><br><span class="line">        ret = <span class="number">123</span>;</span><br><span class="line">    &#125; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

</li>
</ul>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

        
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block home" lang="en">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/11/21/Typescript/%E5%85%BC%E5%AE%B9%E6%80%A7/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/Typescript/images/avatar.gif">
      <meta itemprop="name" content="HC">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Typescript">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          
            <a href="/Typescript/2020/11/21/Typescript/%E5%85%BC%E5%AE%B9%E6%80%A7/" class="post-title-link" itemprop="url">Typescript/兼容性</a>
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>

              <time title="Created: 2020-11-21 11:51:29" itemprop="dateCreated datePublished" datetime="2020-11-21T11:51:29+08:00">2020-11-21</time>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h1 id="兼容性"><a href="#兼容性" class="headerlink" title="兼容性"></a>兼容性</h1><p>要牢记一句话: <strong>ts一切都是为了安全！！！</strong>,因此不要死记硬背，要从安全性去考虑即可</p>
<p><strong>如果是一个值，并且是联合类型的(如基本类型的兼容性)，从赋值方考虑，即等号右边赋值过去了，满不满足</strong></p>
<ul>
<li><p>接口的兼容性</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> IPerson1 &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> IPerson2 &#123;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    age: <span class="built_in">number</span>;</span><br><span class="line">    sex: <span class="built_in">number</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> obj1!: IPerson1;</span><br><span class="line"><span class="keyword">let</span> obj2!: IPerson2;</span><br><span class="line"></span><br><span class="line"><span class="comment">//obj1 = obj2;  </span></span><br><span class="line">obj2 = obj1; <span class="comment">// 报错  IPerson1中没有sex, 如果赋值给了obj2, obj2.sex就会报错，因此ts编译时是不让通过的</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>基本类型的兼容性</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> BaseType1 = <span class="built_in">string</span> | <span class="built_in">number</span> | <span class="built_in">boolean</span>;</span><br><span class="line"><span class="keyword">type</span> BaseType2 = <span class="built_in">string</span> | <span class="built_in">number</span>;</span><br><span class="line"><span class="keyword">let</span> b1!: BaseType1;</span><br><span class="line"><span class="keyword">let</span> b2!: BaseType2;</span><br><span class="line"><span class="comment">// b1 = b2;</span></span><br><span class="line">b2 = b1;  <span class="comment">// 报错, b1类型本来没有boolean, b2有boolean类型，那赋给boolean类型会不接受，所以不兼容</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>类的兼容性</p>
<p>类的兼容性只考虑<strong>结构</strong>是否相同，不管两个类有没有关系，只需考虑结构是否相同即可</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> Animal &#123;</span><br><span class="line">    <span class="keyword">public</span> name: <span class="built_in">string</span> = <span class="string">'hchlq'</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> Cat <span class="keyword">extends</span> Animal &#123;</span><br><span class="line">    <span class="keyword">public</span> age: <span class="built_in">number</span> = <span class="number">2</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> t1: <span class="keyword">typeof</span> Animal = Animal;</span><br><span class="line"><span class="keyword">let</span> t2: <span class="keyword">typeof</span> Cat = Cat;</span><br><span class="line"><span class="comment">// t1 = t2;</span></span><br><span class="line">t2 = t1; <span class="comment">// 报错， 因为t1中只有name属性 t2有age,同时继承了父亲Animal，因此相当于既有name，也有age</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>函数的兼容性</p>
<ul>
<li><p>比较参数</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> fn1 = <span class="function">(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span>, sex: <span class="built_in">string</span></span>) =&gt;</span> <span class="built_in">void</span>;</span><br><span class="line"><span class="keyword">type</span> fn2 = <span class="function">(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span></span>) =&gt;</span> <span class="built_in">void</span></span><br><span class="line"><span class="keyword">let</span> t1!: fn1;</span><br><span class="line"><span class="keyword">let</span> t2!: fn2;</span><br><span class="line"><span class="comment">// t1 = t2;</span></span><br><span class="line">t2 = t1;<span class="comment">// 报错，fn1需要三个参数，但是fn2只提供两个参数，不满足fn1需要的三个参数</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>比较返回值</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> fn1 = <span class="function">(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span></span>) =&gt;</span> &#123;name: <span class="built_in">string</span>, age: <span class="built_in">number</span>&#125;;</span><br><span class="line"><span class="keyword">type</span> fn2 = <span class="function">(<span class="params">name: <span class="built_in">string</span>, age: <span class="built_in">number</span></span>) =&gt;</span> &#123;name: <span class="built_in">string</span>&#125;;</span><br><span class="line"><span class="keyword">let</span> t1!: fn1;</span><br><span class="line"><span class="keyword">let</span> t2!: fn2;</span><br><span class="line">t1 = t2; <span class="comment">// 报错， 返回值中，只能多的赋给少的，像fn1,需要两个属性的返回值，后面可能会用到，fn2只返回有一个属性，因此可能会出错。</span></span><br><span class="line"><span class="comment">// t2 = t1;</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>函数的协变和逆变</p>
<ul>
<li><p>协变: 只在同一个方向</p>
</li>
<li><p>逆变： 只在相反的方向</p>
</li>
<li><p>双向协变: 包括同一个方向和不同方向</p>
</li>
<li><p>不变: 类型不完全相同，则它们是不兼容的。</p>
</li>
<li><p>返回值类型是协变的，参数类型是逆变</p>
</li>
<li><p>参数逆变父类 返回值协变子类 <strong>搀你父,返鞋子</strong></p>
</li>
<li><p>理解: 参数可以少穿多， 返回值只能多传少，孩子继承父类，既有父亲的，也有自己的，是多的一方</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 始终牢记 "参数可以少穿多， 返回值只能多传少，孩子继承父类，既有父亲的，也有自己的，是多的一方"</span></span><br><span class="line"><span class="keyword">class</span> Animal&#123;&#125;</span><br><span class="line"><span class="keyword">class</span> Dog <span class="keyword">extends</span> Animal&#123;</span><br><span class="line">    <span class="keyword">public</span> name:<span class="built_in">string</span> = <span class="string">'Dog'</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> BlackDog <span class="keyword">extends</span> Dog &#123;</span><br><span class="line">    <span class="keyword">public</span> age: <span class="built_in">number</span> = <span class="number">10</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> WhiteDog <span class="keyword">extends</span> Dog &#123;</span><br><span class="line">    <span class="keyword">public</span> home: <span class="built_in">string</span> = <span class="string">'北京'</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> animal: Animal;</span><br><span class="line"><span class="keyword">let</span> blackDog: BlackDog;</span><br><span class="line"><span class="keyword">let</span> whiteDog: WhiteDog;</span><br><span class="line"><span class="keyword">type</span> Callback = <span class="function">(<span class="params">dog: Dog</span>)=&gt;</span>Dog;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">exec</span>(<span class="params">callback:Callback</span>):<span class="title">void</span></span>&#123;</span><br><span class="line">    callback(whiteDog);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> ChildToChild = <span class="function">(<span class="params">blackDog: BlackDog</span>) =&gt;</span> BlackDog;</span><br><span class="line"><span class="keyword">const</span> childToChild: ChildToChild = (blackDog: BlackDog): <span class="function"><span class="params">BlackDog</span> =&gt;</span> blackDog</span><br><span class="line">exec(childToChild); <span class="comment">// 报错, 参数不满足</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//也不行,理由同上</span></span><br><span class="line"><span class="keyword">type</span> ChildToParent = <span class="function">(<span class="params">blackDog: BlackDog</span>) =&gt;</span> Animal;</span><br><span class="line"><span class="keyword">const</span> childToParent: ChildToParent = (blackDog: BlackDog): <span class="function"><span class="params">Animal</span> =&gt;</span> animal</span><br><span class="line">exec(childToParent); <span class="comment">// 报错， 参数和返回值都不满足</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//不行 因为有可能调用返回的Dog的方法</span></span><br><span class="line"><span class="keyword">type</span> ParentToParent = <span class="function">(<span class="params">animal: Animal</span>) =&gt;</span> Animal;</span><br><span class="line"><span class="keyword">const</span> parentToParent: ParentToParent = (animal: Animal): <span class="function"><span class="params">Animal</span> =&gt;</span> animal</span><br><span class="line">exec(parentToParent); <span class="comment">// 报错， 返回值不满足</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> ParentToChild = <span class="function">(<span class="params">animal: Animal</span>) =&gt;</span> BlackDog;</span><br><span class="line"><span class="keyword">const</span> parentToChild: ParentToChild = (animal: Animal): <span class="function"><span class="params">BlackDog</span> =&gt;</span> blackDog</span><br><span class="line">exec(parentToChild); <span class="comment">// 可以，参数的返回值都满足</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>看一下参数只有一个，类型是联合类型的情况</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Fn1 = <span class="function">(<span class="params">name: <span class="built_in">string</span> | <span class="built_in">number</span> | <span class="built_in">boolean</span></span>) =&gt;</span> <span class="built_in">void</span>; <span class="comment">// void表示使用这个类型的函数不关心返回值</span></span><br><span class="line"><span class="keyword">type</span> Fn2 = <span class="function">(<span class="params">name: <span class="built_in">string</span> | <span class="built_in">number</span></span>) =&gt;</span> <span class="built_in">void</span>;</span><br><span class="line"><span class="keyword">let</span> fn1!: Fn1;</span><br><span class="line"><span class="keyword">let</span> fn2!: Fn2;</span><br><span class="line">fn1 = fn2; <span class="comment">// 报错，因为fn1可能是string, number或者boolean, 但是fn2只有string, number, 如果fn1是boolean, 那么fn2是接受不了的</span></span><br><span class="line"><span class="comment">//fn2 = fn1;</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>泛型的兼容性</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1 如果接口内容为空，可以</span></span><br><span class="line"><span class="keyword">interface</span> IT1&lt;T&gt; &#123;&#125;</span><br><span class="line"><span class="keyword">interface</span> IT2&lt;T&gt; &#123;&#125;;</span><br><span class="line"><span class="keyword">let</span> t1!:IT1&lt;<span class="built_in">number</span>&gt;;</span><br><span class="line"><span class="keyword">let</span> t2!: IT2&lt;<span class="built_in">string</span>&gt;;</span><br><span class="line">t2 = t1; <span class="comment">// t1 = t2都行</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">//-------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//如果接口内容有值，看类型是否相同</span></span><br><span class="line"><span class="keyword">interface</span> IT1&lt;T&gt; &#123;</span><br><span class="line">    name: T</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> IT2&lt;T&gt; &#123;</span><br><span class="line">    name: T</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">let</span> t1!:IT1&lt;<span class="built_in">number</span>&gt;;</span><br><span class="line"><span class="keyword">let</span> t2!: IT2&lt;<span class="built_in">string</span>&gt;;</span><br><span class="line">t2 = t1; <span class="comment">// 报错  如果IT2为number的话，就通过</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>枚举类型</p>
<p>枚举类型和数字类型兼容</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> e!:Color;</span><br><span class="line">e = Color.red;</span><br><span class="line">e = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> num:<span class="built_in">number</span> = <span class="number">0</span>;</span><br><span class="line">num = Color.red;</span><br></pre></td></tr></table></figure>

</li>
</ul>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

  </div>

  
  <nav class="pagination">
    <span class="page-number current">1</span><a class="page-number" href="/Typescript/page/2/">2</a><a class="extend next" rel="next" href="/Typescript/page/2/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
  </nav>



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          Table of Contents
        </li>
        <li class="sidebar-nav-overview">
          Overview
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">HC</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/Typescript/archives/">
        
          <span class="site-state-item-count">12</span>
          <span class="site-state-item-name">posts</span>
        </a>
      </div>
  </nav>
</div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">HC</span>
</div>
  <div class="powered-by">Powered by <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> v4.2.1
  </div>
  <span class="post-meta-divider">|</span>
  <div class="theme-info">Theme – <a href="https://muse.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Muse</a> v7.7.2
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/Typescript/lib/anime.min.js"></script>
  <script src="/Typescript/lib/velocity/velocity.min.js"></script>
  <script src="/Typescript/lib/velocity/velocity.ui.min.js"></script>

<script src="/Typescript/js/utils.js"></script>

<script src="/Typescript/js/motion.js"></script>


<script src="/Typescript/js/schemes/muse.js"></script>


<script src="/Typescript/js/next-boot.js"></script>




  















  

  

</body>
</html>
